Question

我试图遍历表行并获取包含特定值的每一行，但这对我不起作用。我正在使用.each()迭代行，并在每个.within()上重复$el 在其中，我使用cy.get('td').eq(1).contains('hello')，但我得到断言错误：

重试超时：预期在元素<td>中找到内容：'hello'，但从未成功。

当我console.log cy.get('td').eq(1)时，它会在每一行中生成所需的单元格，并且测试通过，所以我不明白为什么链接.contains()不起作用...

it('get element in table', () => {
  cy.visit('http://localhost:3000/');
  cy.get('tbody tr').each(($el) => {
    cy.wrap($el).within(() => {
      cy.get('td').eq(1).contains('hello') // contains() doesn't work
    })
  })
});

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>hello</td>
      <td>$80</td>
    </tr>
     <tr>
      <td>$10</td>
      <td>hello</td>
    </tr>
  </tbody>
</table>

Answer 1

should('have.text', text)应该可以工作

cy.get('td').eq(1).should('have.text', 'hello')

如果文本周围有空格，请使用contain.text

cy.get('td').eq(1).should('contain.text', 'hello')

Answer 2

简单的答案是：不要：）

要更具体，请使用html属性选择。约定是要有一个名为data-cy的属性。此外，我发现在选择特定行时使用data-cy-identifier很方便。由于我不确定您在尝试使用什么代码，因此我将使用类似的示例，希望可以帮助您：

<table data-cy="expences">
    <tr>
        <td data-cy="month">January</td>
        <td data-cy="price">$100</td>
    </tr>

    <tr data-cy="discounted">
        <td data-cy="month">Feburary</td>
        <td data-cy="price">$80</td>
    </tr>

    <tr data-cy="discounted">
        <td data-cy="month">March</td>
        <td data-cy="price">$10</td>
    </tr>
</table>

您当然可以进行各种组合，但是现在您可以进行更具体和有用的选择，例如：

cy.get('[data-cy="expenses"]').find('[data-cy="discounted"]').find('[data-cy="price"]').should(...)

和类似。这是灵活的，因为它反映了数据的结构而不是表示，因此您可以在以后将其更改为列表或其他内容。它避免了选择易变的事物，因此它也更强大。它还使用层次结构而不是过于具体的选择器。

添加data-cy-identifier之类的内容的想法使您可以按ID进行选择（您可以使用javascript，angular，vue或您使用的任何内容进行传播），然后通过逻辑关联检查诸如行内容之类的内容项目。

希望它可以助您一臂之力。我也建议您阅读：https://docs.cypress.io/guides/references/best-practices.html

赛普拉斯迭代表行在单元格中获得特定元素

2 个答案: