Cypress如何选择符合条件的列表行并解决删除时索引跳变问题？

核心问题分析 #

你写的初始代码存在3个问题：

1. 文本匹配写法错误：jQuery的contains()方法是用于判断是否包含指定子元素，不能用来匹配文本内容，正确写法是取元素text()后用includes()判断
2. 删除按钮选择范围错误：直接用cy.get('#deleteBtn')是全局查询，只会点击页面第一个符合条件的删除按钮，不会定位到当前遍历行内的按钮
3. 正序遍历DOM删除导致索引偏移：初始获取的tr列表是固定的，删除某一行后后续DOM节点索引会整体前移，导致遍历直接跳过下一行

解决方案 #

方案1：倒序遍历（推荐，性能最高）

倒序从最后一行开始遍历，删除操作不会影响未遍历的前置节点索引，不会出现跳行问题：

cy.get('tbody tr').then($allTr => {
  // 从最后一行倒序往前遍历
  for (let i = $allTr.length - 1; i >= 0; i--) {
    const $currentTr = $allTr.eq(i);
    // 匹配当前行内的名称文本
    if ($currentTr.find('.orderTemplate-name').text().includes('automated test title')) {
      // 只点击当前行内的删除按钮
      cy.wrap($currentTr).find('#deleteBtn').click();
      // 如果删除有二次确认弹窗，可在这里加确认逻辑，比如：
      // cy.contains('确定删除').click();
    }
  }
})

方案2：递归删除（逻辑更简单）

每次匹配第一行符合条件的记录删除，直到没有匹配记录为止，完全避开索引问题：

const deleteMatchedRows = () => {
  // 查找符合条件的第一行
  cy.get('tbody tr:has(.orderTemplate-name:contains("automated test title"))')
    .then($matchedTr => {
      if ($matchedTr.length) {
        cy.wrap($matchedTr).find('#deleteBtn').click();
        // 确认删除后递归调用，继续删除下一条
        // cy.contains('确定删除').click();
        deleteMatchedRows();
      }
    })
}
// 执行删除逻辑
deleteMatchedRows();

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