Cypress：在元素列表中查找带有文本的元素

Question

对于 Java/Kotlin 极客来说，我发现 Cypress 有点难以使用，因为我已经习惯了 Java/Kotlin 和 Selenium 的工作方式。

在此示例中，我在获取包含多行数据的表以及创建一种在特定行中获取特定 td 的优雅方法时遇到了一些麻烦。

考虑这个简化的标记：

<table>
 <tr data-e2e-selector="case-row">
  <td data-e2e-selector="date">3. sep</td>
  <td data-e2e-selecto=""name">Frank</td>
 </tr>
 <tr data-e2e-selector="case-row">
  <td data-e2e-selector="date">12. sep</td>
  <td data-e2e-selecto=""name">Ola</td>
 ....
 ....
 <tr data-e2e-selector="case-row">
  <td data-e2e-selector="date">23. sep</td>
  <td data-e2e-selecto=""name">Morgan</td>
</table>

我可以得到整组行，如下所示：

cy.get('[data-e2e-selector="case-row]')

这为 med 提供了正确行数的列表/数组。

但是，如果我想从第一行、最后一行或其他特定行获取 data-e2e-selector="date" 字段，我就会遇到问题。

我认为这一行将验证第一行的“日期”字段：

cy.get('[data-e2e-selector=case-row]').first().get('[data-e2e-selector=innsendtDato]').should('contain.text', "3. sep")    

但显然事实并非如此。因为如果 cypress 跑步者报告此（“成功”）检查：

-assert- expected '[ <td#sakInnsendtDato_0.ng-star-inserted>, 20 more... ]' to contain text '23. sep'

这似乎表明它正在查看所有 21 行以找到具有预期值的 a 。而我想知道它是否在第一。

为了验证这一点，如果我将“first()”更改为“last()”，它也会验证成功。

那么，这是如何工作的？

我还尝试使用索引来指示第一行，而不是first()或last()，但这会产生编译错误。

有什么想法吗？

Answer 1

您要使用的 Cypress 命令是

cy.find()

。 这将生成一个后代 DOM 元素，其中

cy.get()

从 DOM 顶部开始搜索。 来自

cy.get()

文档：

cy.get

命令始终从 cy.root 元素开始搜索。在大多数情况下，它是文档元素，除非在 .within() 命令内使用。 .find 命令从当前主题开始搜索。

cy.get('[data-e2e-selector=case-row]')
  .first()
  .find('[data-e2e-selector=innsendtDato]')
  .should('contain.text', "3. sep");

或者，您可以使用

.within()

生成第一个元素，然后在该回调中使用

cy.get()

。

cy.get('[data-e2e-selector=case-row]')
  .first()
  .within(($el) => {
    cy.get('[data-e2e-selector=innsendtDato]')
      .should('contain.text', "3. sep");
  });