Cypress E2E测试问题：点击Pick按钮耗尽后仍持续运行

背景与需求 #

• 应用UI中，UNPICKED ITEMS列表下的未选中产品带有Pick按钮，按钮右侧为可点击次数
• 点击Pick按钮会将产品加入PICKED ITEMS；连续点击某产品的Pick按钮至次数耗尽，该产品会从UNPICKED ITEMS移除
• 需要编写Cypress测试：自动点击Pick按钮X次，X为UNPICKED ITEMS下所有产品的数量总和

问题现象 #

编写的测试代码执行完所有按钮点击后，测试仍持续运行，无法正常结束。

原因分析 #

这类问题通常源于Cypress异步操作未被正确处理：

1. 循环点击时未等待DOM更新（比如点击后产品数量变化、元素移除），导致Cypress仍在等待不存在的元素
2. 循环逻辑未正确终止，或总点击次数计算存在偏差

解决方案 #

以下是稳定的实现思路和代码示例：

步骤1：计算总点击次数 #

先获取UNPICKED ITEMS下所有产品的数量并求和：

cy.get('.unpicked-items .product-quantity') // 替换为你应用中数量元素的实际选择器
  .then(quantities => {
    const totalClicks = Cypress._.sumBy(quantities, el => parseInt(el.textContent))
    return totalClicks
  })

步骤2：递归点击并处理DOM变化 #

用递归方式执行点击，每次点击后等待DOM更新，确保操作同步：

function clickPickButton(remainingClicks) {
  if (remainingClicks <= 0) return

  cy.get('.unpicked-items .pick-button') // 替换为你应用中Pick按钮的实际选择器
    .first()
    .then($button => {
      const $productItem = $button.closest('.product-item')
      const initialQuantity = parseInt($productItem.find('.product-quantity').text())
      
      $button.click()
      
      // 精准等待DOM更新：数量减少或产品移除
      if (initialQuantity > 1) {
        cy.wrap($productItem).find('.product-quantity').should('have.text', (initialQuantity - 1).toString())
      } else {
        cy.wrap($productItem).should('not.exist')
      }
      
      clickPickButton(remainingClicks - 1)
    })
}

// 触发点击流程
cy.get('.unpicked-items .product-quantity')
  .then(quantities => {
    const totalClicks = Cypress._.sumBy(quantities, el => parseInt(el.textContent))
    clickPickButton(totalClicks)
  })

关键注意事项 #

• 务必将代码中的选择器（.unpicked-items、.product-quantity等）替换为你应用DOM结构对应的实际选择器
• 用断言等待DOM更新替代固定等待时间，能大幅提升测试稳定性
• 递归逻辑能自然处理每次点击后的元素变化，避免Cypress因找不到元素而挂起

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