Reactjs 为什么Cypress不能识别react-datepicker元素的testid？

目标

  it('Displays the edit fields', () => {
    cy.get('[data-testid="accountButton"]')
      .click();

    cy.get('[data-testid="editUserDetailsButton"]')
      .click();

    cy.get('[data-testid="user_email"]')
      .should('not.be.visible');

    cy.get('[data-testid="edit_full_name"]')
      .should('be.visible');

    cy.get('[data-testid="edit_dob"]')
      .should('be.visible');

    cy.get('[data-testid="edit_email"]')
      .should('be.visible')
      .should('have.value', 'test@editdetails.com');
  })

使Cypress识别和操作日期选择器元素

问题

我无法让Cypress识别DatePicker元素的数据testid，因此无法对其进行测试

错误

Timed out retrying: Expected to find element: [data-testid="edit_dob"], but never found it.

尝试

我曾尝试将DatePicker元素放在input和div元素中，以作为目标，但由于其他原因，它们没有达到预期的效果

我还查阅了DatePicker和Cypress的文档，其中提到了另一个，以及这里类似的问题

代码

下面的代码按预期工作，只是Cypress似乎与DatePicker输入不兼容

  function displayEditDetails() {
    let listOfForms = [];
    for (const detail in details) {
        listOfForms.push(
          <FormGroup controlId={detail} key={`key_edit_${detail}`}>
            <FormLabel>{detail.charAt(0).toUpperCase() + detail.slice(1).replace('_', ' ')}</FormLabel>
            <FormControl
              data-testid={`edit_${detail}`}
              type={detail}
              value={details[detail] || ''}
              onChange={handleDetailsChange}
            />
          </FormGroup>
        )
    }
    listOfForms.push(
      <DatePicker
        data-testid={'edit_dob'}
        selected={dob}
        onChange={setDob}
        maxDate={new Date()}
      />
    );
    return(
      listOfForms
    )
  }

一旦我可以确定目标，我计划测试清除当前输入并在中键入新日期。任何针对拾荒者的帮助和进一步潜在陷阱的警告都将受到感谢

编辑：这里是表单生成的HTML

<form>
  <div class="form-group">
    <label class="form-label" for="email">Email</label>
    <input data-testid="edit_email" type="email" id="email" class="form-control" value="admin@example.com" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
  </div>

  <div class="form-group">
    <label class="form-label" for="full_name">Full name</label>
    <input data-testid="edit_full_name" type="full_name" id="full_name" class="form-control" value="Jareth">
  </div>

  <div class="form-group">
    <label class="form-label" for="address">Address</label>
    <input data-testid="edit_address" type="address" id="address" class="form-control" value="">
  </div>

  <div class="form-group">
    <label class="form-label" for="postcode">Postcode</label>
    <input data-testid="edit_postcode" type="postcode" id="postcode" class="form-control" value="">
  </div>

  <div data-testid="edit_dob">
    <div class="react-datepicker-wrapper">
      <div class="react-datepicker__input-container">
        <input type="text" class="" value="04/03/1999">
      </div>
    </div>
  </div>

  <button data-testid="confirmChangesButton" type="submit" class="LoaderButton  btn btn-primary btn-block">Confirm Changes</button></form>

电子邮件
全名
地址
邮政编码
确认更改

查看通过运行应用程序生成的HTML时，问题是显而易见的

日期选择器HTML

  <div data-testid="edit_dob">
    <div class="react-datepicker-wrapper">
      <div class="react-datepicker__input-container">
        <input type="text" class="" value="04/03/1999">
      </div>
    </div>
  </div>

DatePicker在几个div中呈现为输入元素，测试id不以输入为目标

解决方案

Cypress的选择器API建议使用输入的父div类

cy.get（'.react-datepicker\uu input-container>input'）

。有了这个，我可以将日期选择器作为目标，清除它，然后键入新的输入

下次注意事项

检查HTML

仔细阅读文档

---

请参考中的命令中使用的概念。是的

---

在命令的代码中，您会发现有必要检查生成的HTML，并根据您的需要对其进行适当的遍历。

您可以共享生成的目标HTML吗？发布HTML让我走上了正确的轨道。我刚刚了解了选择器操场，它正在按预期工作。