如何使用Cypress查找表格指定单元格内容并点击对应行？

我需要在表格中找到data-testid="data-table-cell-code.id"列里内容为"0EF"的单元格，然后点击该单元格所在的整行。

我试过以下代码，但都没成功：

cy.get('[data-testid="data-table-cell-code.id"]').should("have.value","0EF").click(); 

cy.get('[data-testid="data-table-cell-code.id"]').contains('0EF').click(); 

对应的HTML结构示例：

<tr
  data-testid="data-table-row"
  role="row"
  class="css-1ra2sqo"
  style="display: flex; flex: 1 0 auto; min-width: 0px"
>
  <td
    role="cell"
    class="css-1t906vg flex-grow-0 text-left"
    data-testid="data-table-cell-expander"
    style="box-sizing: border-box; flex: 30 0 auto; min-width: 0px; width: 30px"
  ></td>
  <td
    role="cell"
    class="css-1t906vg flex-grow-0 text-left"
    data-testid="data-table-cell-checkbox"
    style="box-sizing: border-box; flex: 30 0 auto; min-width: 0px; width: 30px"
  >
    <div class="flex h-full items-center justify-center">
      <input type="checkbox" readonly="" data-testid="row-checkbox" />
    </div>
  </td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-code"
    style="
      box-sizing: border-box;
      flex: 126 0 auto;
      min-width: 0px;
      width: 126px;
    "
  >
    CBL-262
  </td>
  <td
    role="cell"
    class="css-1t906vg text-left"
    data-testid="data-table-cell-code.id"
    style="
      box-sizing: border-box;
      flex: 134 0 auto;
      min-width: 0px;
      width: 134px;
    "
  >
    0EF
  </td>
  <!-- 其余单元格结构省略 -->
</tr>

问题原因分析 #

1. 第一个代码使用have.value错误：<td>的内容是文本节点，并非表单元素的value属性，断言会直接失败。
2. 第二个代码点击对象错误：contains('0EF')能定位到目标单元格，但点击的是单元格本身，不是所在的整行。

正确实现代码 #

先定位到目标单元格，再通过DOM遍历找到其父行元素并点击：

// 方式1：通过parents定位到行
cy.get('[data-testid="data-table-cell-code.id"]')
  .contains('0EF')
  .parents('[data-testid="data-table-row"]')
  .click();

// 方式2：通过closest定位最近的tr父元素
cy.contains('[data-testid="data-table-cell-code.id"]', '0EF')
  .closest('tr')
  .click();

动态表格处理建议 #

如果表格是异步加载的，建议先等待行元素加载完成，避免找不到元素的问题：

cy.get('[data-testid="data-table-row"]').should('be.visible');
cy.contains('[data-testid="data-table-cell-code.id"]', '0EF')
  .closest('tr')
  .click();

内容的提问来源于stack exchange，提问作者kevin.c