Waiting for DOM to load: Cypress

Phaki 0
Viewed 34

I try to make and E2E test with Cypress. I have to visit multiple links from a table and make an assertion after visiting the page.

In the Cypress UI I see the page is loaded, also if I check I can see the elements in the DOM. But my Cypress assertion not working, it says:

Timed out retrying after 4000ms: cy.should() failed because this element is detached from the DOM.

<div id="content" class="css-1ddoub">...</div>

Cypress requires elements be attached in the DOM to interact with them.

The previous command that ran was:

> cy.wait()

This DOM element likely became detached somewhere between the previous and current command.

My test code:

cy.get('[id="content"').parent().within(()=>{
      cy.get('[data-cy="list-item"]').each(item => {
        const link = item.find('a').first();

        cy.visit(link.attr('href')!)
        cy.wait(5000)
        cy.findByText(/report herunterladen/i)
   })
})

Element exists in the DOM: enter image description here

Interesting because If I hardcode the url and not use .each, then all assertions works fine after .visit().

cy.visit('/de/banks/compare/?a=calculations.average&b=ins.PL.PKO') // Hardcoded url
cy.wait(1000)
cy.findByText(/report herunterladen/i)

I tried to use cy.wait() even with a large number like 30000 but it didn't work.

For me it looks like Cypress has a bug with .each() method. It doesn't want to load pages DOM elements within the each function.

Cypress: 10.7.0

cypress-testing-library e2e-testing cypress testing html
1 Answers

Please try this!

 cy.get('[id="content"').parent().within(()=>{
              cy.get('[data-cy="list-item"]').each(item => {
                
             cy.wrap(item).find('a').first().invoke('attr','href').then((href)=>{
                cy.visit(href)
                cy.wait(2000)
                cy.findByText(/report herunterladen/i)
             })   
           })
        })
userd75m10
Related