Cypress如何定位特定文本所在行并点击同行相同类名的按钮

原有代码失效原因 #

• parents('tr') 会遍历所有上层祖先tr元素，若存在表格嵌套的情况会匹配到错误的上层行
• find('button') 无筛选条件，同一行存在多个按钮时会默认点击第一个匹配项，无法命中目标时钟按钮
• 缺少元素可交互性校验，可能在按钮未渲染完成时触发点击导致失败

优化后实现方案 #

首先确认行容器的标签/类名，若你的行是<tr>结构直接使用以下代码，如果是div类的行容器，将closest的参数替换为对应容器选择器即可。

// 动态姓名变量可根据你的业务逻辑赋值，比如从接口响应、页面其他节点获取
const targetUserName = 'Agranov Anton'
cy.contains(targetUserName)
  // 匹配离文本最近的行容器，避免层级匹配错误
  .closest('tr')
  // 给按钮加筛选条件，根据你的实际按钮特征调整，比如时钟按钮常见的aria-label、类名属性
  .find('button[aria-label*="时钟"]')
  // 校验按钮可见后再点击
  .should('be.visible')
  .click()

如果不清楚按钮的唯一筛选属性，可以先加调试代码输出同行动按钮的特征：

cy.contains('Agranov Anton')
  .closest('tr')
  .find('button')
  .each(btn => {
    // 控制台打印每个按钮的类名、属性，找到时钟按钮的独有标识
    console.log('按钮类名：', btn.attr('class'), '按钮属性：', btn.attr('aria-label'))
  })

场景示例图 #

内容的提问来源于stack exchange，提问作者Šahen Bdojan