Typescript 在Cypress中，是否可以在不标识错误的情况下对元素调用.Click()方法

从测试代码来看，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>

判断从.getElementsByClassName()返回的type，你可以看到它是HTMLCollection，这是103.

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()方法(因为该类型是针对all elements的，而不仅仅是可点击的)

假设是打字判断器抛出了红色的弯弯曲曲的(因为您运行的是Angular )，您可以try 将类型强制转换为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')
  .find('td:nth-child(3)')
  .find('.link.ng-star-inserted')
  .click()