CSS属性display:none导致Cypress无法点击添加按钮求助

问题场景 #

为基于AngularJS的电商站编写E2E测试，遍历表格行，当产品名称包含“Cookie”时点击对应行的“Add”按钮加入购物车。但仅索引0的产品添加成功，后续迭代报错：

Timed out retrying after 4050ms: cy.click() failed because this element is not visible:
<span ng-if="!(!(price.Stock > 0) && product.AllowBackOrders && !bypassStock)" translate="" class="ng-scope">Add</span>
This element <span.ng-scope> is not visible because its parent <button.btn.btn-primary.add-btn.hide> has CSS property: display: none

使用click({force: true})后仍仅添加第一个符合条件的产品。

问题根源 #

1. 定位错误：原代码中cy.wrap(productText).get('.add-btn')的get是全局查找，每次都会匹配页面中第一个.add-btn元素，而非当前遍历行内的按钮，导致后续迭代重复点击第一个按钮，而非目标行按钮。
2. 按钮状态未校验：部分行的“Add”按钮因库存不足、预售设置等业务逻辑被添加hide类隐藏，直接点击会触发可见性校验错误。

解决方案 #

1. 基于当前行定位按钮 #

遍历表格行时，通过当前行元素$el的find方法定位按钮，确保操作的是当前行内的元素。

2. 校验按钮可见性后操作 #

先判断按钮是否可见，避免对隐藏元素执行点击操作，同时可添加日志记录跳过的情况。

修正后的代码示例 #

cy.get('table tr').each(($el) => {
  const productText = $el.find('.productName').text().trim()
  if (productText.includes('Cookie')) {
    const addBtn = $el.find('.add-btn')
    // 校验按钮是否可见
    addBtn.invoke('is', ':visible').then((isVisible) => {
      if (isVisible) {
        addBtn.contains('Add').click()
      } else {
        cy.log(`产品【${productText}】的Add按钮不可见，跳过添加`)
      }
    })
  }
})

补充说明 #

• 若业务允许强制添加（比如测试预售场景），可在确认是目标行按钮后使用click({force: true})，但需确保定位的是当前行的按钮：

  addBtn.contains('Add').click({force: true})
  

• 可进一步通过页面元素的属性/类名判断按钮状态，匹配业务逻辑中的库存、预售规则。

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