如何查看children在Cypress.js中的位置索引？

Question

标题可能有点乱，我不知道怎么表达我的想法。

让我解释一下这个简单的例子。鉴于以下 table...

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

...我想：

获取包含“Contact”的<th>的索引位置（在本例中为1）
使用此索引检查相应的单元格 (<td>) 是否包含特定值 - 在本例中为“Maria Anders”

我不知道如何处理第 1 点。

我知道我可以使用

cy.get('th').eq(1).should('contain', 'Contact')
cy.get('td').eq(1).should('contain', 'Maria Anders')

但在我的例子中，table 内容是动态的，我不能指望我要查找的 header 会在特定索引下。相反，我想在标题文本后找到 <th> 索引。

Answer 1

这可以通过返回 Cypress 的 .each() 命令的 index 来实现。假设每行中的索引位置之间存在 1:1 相关性，则类似以下内容应该有效...

cy.get('th').each(($th, index) => {
  if ($th.text() === 'Contact') {
    cy.get('tr').eq(index).should('contain', 'Maria Anders');
    // Assuming we'd only find one `Contact` header, we can exit the `.each()` once found
    return false
  }
});

如果 th 和 tr 具有相同索引的 1:1 相关性不存在，您可以做类似的事情来找出索引之间的关系th 和 tr 的索引。

Info on returning early from .each()

Answer 2

jQuery.index() method在这里很有用

Search for a given element from among the matched elements

cy.contains('table thead th', 'Contact')
  .then($th => $th.index())
  .then(contactIndex => {
    cy.get('table tbody td').eq(contactIndex).should('contain', 'Maria Anders')
  })

如何查看children在Cypress.js中的位置索引？

How to check children position index in Cypress.js?

javascript

html-table

e2e-testing

cypress