CSS 属性：显示：无 Cypress 错误 - 无法单击“添加”按钮将产品添加到购物篮

Question

我目前正在为一个用 Angular JS 开发的电子商务网站构建一个 e2e 回归测试套件，我编写了一个循环并在其中提供了一个条件，这是我的代码：

           const productText = $el.find('.productName').text()
           if(productText.includes('Cookie')) {
              cy.wrap(productText).get('.add-btn').contains('Add').click()
             
           }
     })```

The website UI is a table view so I'm looping through this table view by tr, and then I also provided a locator there .productName which is the product name basically and  if any of the product names on in this table contain "Cookies" word then find the Add button and click to add to basket.

Interestingly if adds the first product at index 0 from the table tr but then when it moves to the next iteration then I get this error:

"Timed out retrying after 4050ms: cy.click() failed because this element is not visible:

<span ng-if="!(!(price.Stock > 0) &amp;&amp; product.AllowBackOrders &amp;&amp; !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"

The locator is the same for all the buttons I have checked this many times, but then if I use click({force: true}), this still add only the first prodiuct to the basket and then find those products which meet the if statement but it does not click on their add button to add them as well into the basket.

Can someone help with this probably is simple but I'm just stuck here with this, here is a video I have recorded: https://vimeo.com/936771058/081f79e031?share=copy

Answer 1

您的很多测试都丢失了，所以很难说，但我想说从可见性检查开始，因为错误全部与元素不可见有关。

cy.contains('.productName', 'my-product')
  .find('.add-btn').contains('Add')
  .should('be.visible')
  .click()

或者如果不影响您的测试，则绕过可见性检查

cy.contains('.productName', 'my-product')
  .find('.add-btn').contains('Add')
  .click({force:true)