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

Question

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

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

当我 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