Cypress如何定位含指定文本的表格行并点击对应编辑按钮

实现需求 #

表格指定列检测到文本Yes（该Yes旁自带删除按钮）时，点击同一行对应的编辑按钮。

原有失效代码 #

测试时编写的两段代码均未达到预期效果：

// 第一段实现
cy.get(':nth-child(6)').contains('Yes').within(() => {
  cy.get('.btn.btn-xs.btn-edit').click()
})

// 第二段实现
cy.get(':nth-child(6)').contains('Yes').find(button).eq(1).click()

对应HTML结构 #

<tr role="row" class="even">
  <td class="sorting_1">
    <a href="http://192.168.0.1:8080/details">abc</a>
  </td>
  <td>xyz</td>
  <td>aws</td>
  <td>No</td>
  <td>No</td>
  <td>"Yes"
    <button data-role="remove" id="support_22_abc" class="btn btn-rejecttxt" onclick="deletevm(this,'3','3:5659','22','abc','22_abc','284')">
      <i class="fa fa-times-circle" data-original-title="Remove Mapping" data-toggle="tooltip"></i>
    </button>
  </td>
  <td>No</td>
  <td>
    <div class="btn-group">
      <a href="http://192.168.0.1:8080/edit">
        <button class="btn btn-xs btn-edit">
          <i class="fa fa-pencil" data-original-title="Edit/Update row data" data-toggle="tooltip" data-placement="top"></i>
        </button>
      </a>
    </div>
  </td>
</tr>

1. 第一段代码调用within()将查找边界限制在包含Yes的<td>单元格内部，但编辑按钮位于同一行的最后一个单元格，不在当前查找范围内，无法匹配到目标元素。
2. 第二段代码存在语法问题：find(button)中标签选择器button未用引号包裹，属于无效选择器；即便修正语法，查找范围仍被限制在Yes所在单元格内，仅能找到同单元格的删除按钮，无法定位到跨单元格的编辑按钮。

核心逻辑：先定位到包含Yes的目标单元格，向上追溯到所属的表格行<tr>，再在当前行范围内查找编辑按钮点击即可。

// 若Yes所在列不是第6列，修改nth-child()内的索引值即可
cy.get('td:nth-child(6):contains("Yes")')
  .parents('tr') // 定位到单元格所在的整行
  .find('.btn.btn-xs.btn-edit') // 在当前行范围内查找编辑按钮
  .click()

• 若表格存在多行包含Yes的情况，可叠加其他列的文本特征缩小匹配范围，避免误点其他行的编辑按钮。
• 操作表格同一行不同列的元素时，通用思路为先定位到具备特征的元素，再向上查找到所属的<tr>行节点，最后在行节点范围内做后续元素查找，不要直接在单个单元格范围内跨列查找元素。

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