为什么 Cypress 无法识别 react-datepicker 元素的 testid？

Question

目标

让 Cypress 识别和操作 DatePicker 元素。

问题

我无法让 Cypress 识别 DatePicker 元素的 data-testid，因此无法对其进行 E2E 测试。

错误

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

尝试次数

我曾尝试将 DatePicker 元素放置在 input 中，并将 div 元素放置到 target 中，但由于其他原因它们按预期失败了。

我还查看了 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
    )
  }

测试

  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');
  })

一旦我可以定位它，我计划测试清除当前输入并输入新日期。感谢任何针对选择器的帮助和对进一步潜在陷阱的警告。

编辑：这是生成的 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>

Answer 1

查看由运行应用程序生成的 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 的 Selector Playground API 建议 cy.get('.react-datepicker__input-container > input')，输入的父 div 的 class。有了这个，我可以定位 DatePicker，清除它，然后键入新的输入。

下次注意事项

检查 HTML
更彻底地阅读文档

Answer 2

参考cy.pickDateRange command in the Cypress Real World App. It is a payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows中使用的概念。

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

为什么 Cypress 无法识别 react-datepicker 元素的 testid？

Why does Cypress not recognise the testid of a react-datepicker element?

reactjs

e2e-testing

react-datepicker

cypress