如何在表格行中根据指定名称找到对应div内的编辑按钮？

需要定位表格中包含名称Kiyara.Hu的行，并点击该行对应的编辑按钮，但执行以下命令未生效：

cy.contains('div','Kiyara.Hu').find('button').click()

页面相关HTML片段：

<div class="oxd-table-cell oxd-padding-cell" role="cell">  
  <div class="oxd-table-card-cell-checkbox">    
    <div class="oxd-checkbox-wrapper" data-v-6179b72a="">
      <label class="" data-v-6179b72a="">
        <input type="checkbox" value="22" data-v-6179b72a="">
        <span class="oxd-checkbox-input oxd-checkbox-input--active --label-right oxd-checkbox-input" data-v-6179b72a="">
          <i class="oxd-icon bi-check oxd-checkbox-input-icon" data-v-bddebfba="" data-v-6179b72a=""></i>
        </span>
      </label>
    </div>  
  </div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">  
  <div data-v-6c07a142="">Kiyara.Hu</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">  
  <div data-v-6c07a142="">ESS</div>
</div>
<div class="oxd-table-cell oxd-padding-cell" role="cell" style="flex: 1 1 0%;">  
  <div data-v-6c07a142="">Kiyara Hu</div>
</div>

页面截图：

原命令失效是因为cy.contains('div','Kiyara.Hu')定位到的是显示名称的子div，而编辑按钮并非该div的后代元素，而是位于同一表格行的其他单元格中，find()方法只能查找当前元素的后代，因此无法找到目标按钮。

方法1：通过父级行定位 #

先找到名称所在单元格，再向上遍历找到整个表格行，最后在该行内查找编辑按钮：

// 找到名称所在单元格，定位到父级表格行，再找编辑按钮
cy.contains('div', 'Kiyara.Hu')
  .closest('div[role="row"]') // 找到所在的表格行（根据role属性定位）
  .find('button.oxd-icon-button') // 根据按钮类名查找编辑按钮，可根据实际情况调整
  .click()

如果表格行有特定类名（如oxd-table-row），也可以替换为.parents('.oxd-table-row')。

方法2：使用XPath直接定位 #

通过XPath直接关联名称和同属一行的编辑按钮：

// 用XPath找到包含Kiyara.Hu的行，再定位该行的编辑按钮
cy.xpath('//div[text()="Kiyara.Hu"]/ancestor::div[@role="row"]//button[contains(@class, "oxd-icon-button")]')
  .click()

内容的提问来源于stack exchange，提问作者Kakashi - Sensei