Cypress如何点击元素子集实现保留首项的批量删除测试

场景说明 #

当前开展表格批量删除功能测试，为校验防误删逻辑、避免操作后清空全部条目，测试要求执行删除后保留第一条数据。由于表格每一行的选择器完全一致，需要在获取元素集合后做过滤，现有全量删除代码如下：

cy.get('[data-cy="item"]').click({multiple: true })
cy.contains('button', 'Delete selected').click()

实现逻辑 #

核心思路是拿到所有行的元素集合后，过滤掉第一条（索引为0的项），只选中剩余条目执行删除，最后增加断言校验剩余条目数量，确保结果符合预期。

写法1：用伪类快速过滤（推荐，代码更简洁） #

直接用Cypress支持的jQuery选择器:first排除首项，再执行批量选中：

// 获取所有条目，过滤掉第一条要保留的项后，选中剩余所有条目
cy.get('[data-cy="item"]')
  .not(':first')
  .click({ multiple: true })

// 点击批量删除按钮
cy.contains('button', 'Delete selected').click()

// 断言校验：删除后表格只剩1条条目
cy.get('[data-cy="item"]').should('have.length', 1)

写法2：遍历判断索引（适配特殊DOM结构场景） #

如果页面DOM结构特殊，伪类选择器匹配不准，可以遍历元素集合，跳过索引为0的首项，只点击其余项：

cy.get('[data-cy="item"]')
  .each(($row, index) => {
    // 跳过第一条（索引0），其余项逐个点击选中
    if (index !== 0) {
      cy.wrap($row).click()
    }
  })

cy.contains('button', 'Delete selected').click()

// 断言校验剩余条目数量
cy.get('[data-cy="item"]').should('have.length', 1)

注意事项 #

• 删除操作后的长度断言是必须项，不能仅依赖前面的选中逻辑判断测试结果，避免元素加载异常、选中逻辑失效时漏测问题
• 如果表格首行是表头不是数据行，只需要把跳过的索引从0改成对应第一条数据的索引即可

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