如何在Cypress中定位表格中包含指定文本的第一行？

方法一：用.filter()精准定位（推荐） #

这种方法可以精确匹配第一列的文本内容，避免:contains()可能误匹配子元素文本的问题，同时直接获取第一个匹配行，无需遍历所有行：

const SELECTOR = {
    dataTableBody: '.p-datatable-tbody'
} as const;

cy.assertVisible(SELECTOR.dataTableBody);

cy.get(`${SELECTOR.dataTableBody} tr`)
  .filter((_, $row) => {
    // 检查当前行第一列的文本是否完全匹配目标内容
    return Cypress.$($row).find('td:nth-child(1)').text().trim() === 'MyText';
  })
  .first() // 仅保留第一个匹配的行
  .then($targetRow => {
    // 在这里对目标行执行操作，比如点击、断言
    $targetRow.click();
    expect($targetRow).to.be.visible;
  });

方法二：简洁的:contains()写法（适合文本唯一无歧义的场景） #

如果确定'MyText'只会出现在目标列中，可以用更简洁的选择器直接定位：

const SELECTOR = {
    dataTableBody: '.p-datatable-tbody'
} as const;

cy.assertVisible(SELECTOR.dataTableBody);

cy.get(`${SELECTOR.dataTableBody} tr:contains('MyText')`)
  .first()
  .then($targetRow => {
    // 执行你的操作逻辑
  });

为什么原来的方法不够高效？ #

你之前用each()遍历所有行的方式，即使找到第一个匹配项后仍会继续遍历剩余行，既冗余又没必要。上面两种方法都是直接定位到目标元素，测试逻辑更简洁高效，也符合Cypress的最佳实践。

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