Cypress匹配表格指定列关键词后点击对应行内按钮的报错问题

• parentsUntil 用法错误：该方法返回的是不包含指定选择器的祖先元素链，你传入的tbody.MuiTableBody-root tr作为终止条件，无法获取到目标行元素，导致后续按钮查找失败。
• 超时配置未覆盖全链路：你仅在cy.get()步骤设置了20000ms超时，后续filter步骤使用的是全局默认10000ms超时，报错提示的10s超时就来源于此。
• 文本匹配规则限制：jQuery的:contains选择器严格区分大小写，且不会自动忽略文本前后的空格、换行符，如果页面上的邮箱文本和传入参数存在上述差异，就会匹配失败。
• 元素嵌套问题：如果邮箱文本不是直接放在td标签内，而是嵌套在td的子元素中，部分场景下也会导致filter的:contains匹配异常。

推荐使用更简洁稳妥的写法，直接定位包含目标文本的表格行：

clickOnDeleteIcon(email: string)  {
  // 直接查找包含指定邮箱的表格行，超时配置作用于整个查找链路
  cy.contains('tbody.MuiTableBody-root tr', email.trim(), { timeout: 20000 })
    // 限定在当前行内查找删除按钮
    .find('button[title="Delete"]')
    .click()
}

如果需要严格限定仅匹配单元格内的文本，避免行内其他元素出现相同文本导致误匹配，可以使用函数式filter做自定义匹配：

clickOnDeleteIcon(email: string)  {
  const targetEmail = email.trim().toLowerCase()
  cy.get('tbody.MuiTableBody-root tr', { timeout: 20000 })
    .filter((_, row) => {
      // 匹配当前行所有单元格内的文本，支持忽略大小写、自动去空格
      return Array.from(row.querySelectorAll('td')).some(td => 
        td.textContent?.trim().toLowerCase().includes(targetEmail)
      )
    })
    .first() // 确保只取第一个匹配的行，避免多匹配报错
    .find('button[title="Delete"]')
    .click()
}

• 点击前可以增加should('be.visible')断言，确保按钮处于可点击状态，避免元素未渲染完成就触发点击的问题
• 如果删除按钮的title属性是动态生成或者存在大小写差异，可以调整选择器，比如用button[aria-label*="Delete"]做模糊匹配

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