Cypress如何遍历表格行，检查每行第三个td元素的文本匹配？

表格HTML代码： #

<tr id="row">
  <td></td>
  <td></td>
  <td>Text</td>
<tr id="row">
  <td></td>
  <td></td>
  <td>Not text</td>

注：每行使用相同ID，所有td元素无标识符。

任务需求 #

遍历表格，检查每行的第三个td元素是否匹配指定文本。

遇到的问题 #

有Java/Kotlin及Selenium使用经验，在Cypress中尝试遍历行时遇到问题：无法依次检查每行对应的第三个td，每次迭代都检查同一个元素。尝试的代码如下：

cy.get("[data-e2e-selector=row]").each(() => {
    cy.pause()
    cy.get("[data-e2e-selector=sak-rad]").get("td").eq(2).should('contain', "Text")
  })

问题出在每次迭代内的cy.get()是全局查询，会重新从整个文档中查找元素，而不是在当前遍历的行范围内查找。要解决这个问题，需要利用each回调提供的当前行元素，限定查找范围：

方法1：使用jQuery上下文查找 #

cy.get("#row").each(($row) => {
  // 从当前行元素内查找第三个td
  const $thirdTd = $row.find("td").eq(2);
  // 直接用Chai断言文本内容
  expect($thirdTd).to.contain("Text");
});

方法2：使用Cypress链式调用（保持Cypress风格） #

cy.get("#row").each(($row) => {
  // 将当前行元素包装成Cypress对象，再链式查找td
  cy.wrap($row)
    .find("td")
    .eq(2)
    .should("contain", "Text");
});

补充说明 #

虽然HTML规范中id应唯一，但Cypress的cy.get("#row")会返回所有匹配该id的元素，不影响遍历逻辑。如果后续可以修改HTML，建议将重复id改为class（比如class="row"），再用cy.get(".row")查找，更符合规范。

内容的提问来源于stack exchange，提问作者kakemonsteret