javascript - 如何检查 Cypress.js 中的子节点位置索引？

Question

标题可能令人困惑，我不知道如何用语言表达我的想法。

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

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

...我想:

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

我不知道如何实现第 1 点。

我知道我可以使用

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

但就我而言，表内容是动态的，我不能期望我正在查找的标题将位于特定索引下。相反，我想找到 <th>标题文本后的索引。

Answer 1

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')
  })