Cypress：等待移除按钮重现后完成购物车批量删除操作

你的问题出在一次性获取所有Remove按钮后循环点击——点击第一个按钮触发Redux更新后，页面DOM会重新渲染，原本获取的剩余按钮元素已经失效，自然无法触发后续删除操作。同时你也没等待加载spinner消失，导致后续操作在DOM更新前就执行了。

下面是两种可靠的解决方式：

方式一：递归删除（推荐） #

通过递归函数，每次删除后等待加载完成，再检查是否还有剩余商品需要删除：

// 定义递归删除函数
const removeAllCartItems = () => {
  cy.get('.remove.btn')
    .first()
    .click()
    // 等待加载spinner消失，请替换成你实际的spinner选择器
    .then(() => {
      cy.get('.loading-spinner').should('not.exist')
      // 检查是否还有剩余的Remove按钮，有则继续删除
      cy.get('.remove.btn').then(remainingButtons => {
        if (remainingButtons.length > 0) {
          removeAllCartItems()
        }
      })
    })
}

// 主测试流程
cy.get('.cart-toggle-btn').click()
removeAllCartItems()

方式二：循环+重新查询DOM #

预先获取商品总数，循环中每次重新查询最新的Remove按钮，同时等待加载完成：

cy.get('.cart-toggle-btn').click()

// 先获取初始商品总数
cy.get('.cart-item').then(items => {
  const totalItems = items.length
  for (let i = 0; i < totalItems; i++) {
    // 每次都重新获取第一个Remove按钮（确保是最新DOM元素）
    cy.get('.remove.btn').first().click()
    // 等待加载完成：要么等spinner消失，要么等商品数量减少
    cy.get('.loading-spinner').should('not.exist')
    // 可选：验证购物车商品数量正确减少
    cy.get('.cart-item').should('have.length', totalItems - i - 1)
  }
})

关键注意点 #

1. 不要一次性获取所有按钮：必须每次删除后重新查询DOM，确保操作的是最新渲染的元素。
2. 等待加载状态结束：通过should('not.exist')等待spinner消失，确保Redux的dispatch操作和DOM更新完成后再执行下一步。
3. 优先依赖UI状态：相比直接等待Redux action完成，等待用户可见的UI变化（spinner消失、商品数量减少）更可靠，也更符合用户实际操作流程。

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