在 Cypress 中，您可以在 Element 上调用 .click() 方法而不识别错误吗？

Question

我有一个 Angular 应用程序，正在为其创建 Cypress E2E。

该应用程序的一个页面有一个表，其中第三列包含一个类名“link ng-star-inserted”的链接，我希望测试在找到特定行后单击该链接。

我实际上已经进行了执行此操作的测试 - 事实上该链接已被单击。

但它不是很优雅，它将 .click() 方法标记为错误（即使它确实有效）。

我正在寻找一种方法，让它不将 .click() 方法标记为错误。

这是我的代码...

cy.get(SELECTOR.dataTableBody).should('be.visible')
        .contains('tr', 'Text I am looking for in the row I want')
        .then($row => {
            cy.log('found it');
            cy.log('on row ' + $row.index());

            //Yes this is kind of ugly.  I tried it every other way I could think of and this is the only way it worked
            let cellWithLink = $row.find('td:nth-child(3)');
            cellWithLink.children().get(0).getElementsByClassName('link ng-star-inserted').item(0).click();
            
});

这是 IDE 将 click() 标记为错误的镜头 - 尽管它确实有效。

非常感谢！

Answer 1

从测试代码来看，HTML 看起来像这样

<table>
  <tbody class="p-datatable-tbody">
    <tr>
      <td></td>
      <td>Some text</td>
    </tr>
    <tr>
      <td>Text I am looking for in the row I want</td>
      <td></td>
      <td>
        <span>
          <a class="link ng-star-inserted">Click me</a></td>
        </span>
    </tr>
  </tbody>
</table>

检查type返回的值.getElementsByClassName()，您可以看到它是一个HTMLCollection，它是元素的通用集合。

cy.get('table').should('be.visible')
  .contains('tr', 'Text I am looking for in the row I want')
  .then($row => {

    let cellWithLink = $row.find('td:nth-child(3)')

    const link = cellWithLink.children()
      .get(0)
      .getElementsByClassName('link ng-star-inserted')
      // .item(0)
      // .click()

    console.log(link)   // result of getElementsByClassName()
  })

该item(0)方法返回一个没有方法的Element.click()（因为这种类型适用于所有元素，而不仅仅是可点击的元素）

假设是打字稿检查器抛出红色波浪线（并且由于您正在运行 Angular），您可以尝试类型转换为HTMLElement，它确实有一个click()方法。

cy.get('table').should('be.visible')
  .contains('tr', 'Text I am looking for in the row I want')
  .then($row => {

    let cellWithLink = $row.find('td:nth-child(3)')
    const link = cellWithLink.children()
      .get(0)
      .getElementsByClassName('link ng-star-inserted')
      .item(0);
      // .click()

    (link as HTMLElement).click()

  })

减少丑陋

您的测试从 Cypress 查询开始，然后转向 jQuery 查询，然后使用本机 HTML 查询（从 开始.get(0)）。

如果你想一直保留 Cypress，这应该足够了：

cy.get('table').should('be.visible')
  .contains('tr', 'Text I am looking for in the row I want')
  .then($row => {

    let cellWithLink = $row.find('td:nth-child(3)')
    const link = cellWithLink.children()
      .get(0)
      .getElementsByClassName('link ng-star-inserted')
      .item(0);
      // .click()

    (link as HTMLElement).click()

  })