CSS property: display: none, web element not found by CYP

[GeorgeBeres]

Current behavior

Hi I do have the same issue when I'm trying to use a loop to go through a list of product in a table view by table row, how can I solve this issue? It adds the first product in the basket but when the loop iterates again then I get the same error as above saying that the locator I have provided CSS property: display: none.

Also if I use click({ force: true }) then still adds only one product to my basket but finds the rest of the products which meet my if condition... again this is not the solution.

Desired behavior

I would like that Cypress to add products to my basket on this eCommerce website.

Test code to reproduce

it('searches for a product and adds it to the basket', () => {
      cy.get('#search-box').type('cookie')
      cy.get('#search-button').click()
      cy.wait(2000)

cy.get('.productList-block').find('tbody tr').each(($el, index, $list) => {
const productText = $el.find('.productName').text()
if(productText.includes('Cookie')) {
cy.wrap(productText).get('.list-buttons').contains('Add').click({ force: true })

       }
 })

})

Cypress Version

13.7.1

Node version

v20.11.1

Operating System

macOS 14.2.1 (23C71)

Debug Logs

none

Other

No response

[jennifer-shehane]

We'll need a reproducible example to assist. Also, check out our community chat, it can be helpful for debugging or answering questions on how to use Cypress.