How to loop by clicking on each link and verify the same element on each page?

user_2385185 0
Viewed 3316

I wrote the code to read each li and I warp it up to get each link. And I tried to visit each link in the loop and verify some element which displayed on each page. However, after the new page loads, cypress throws me an error of DOM detach.

https://imgur.com/a/9Pmspkm

I tried to loop and click each link in many ways but I have no luck to make it successfully.

I tried this. 

it('test', () => {
    cy.visit('https://www.cypress.io/')

    cy.get('li.header__NavItem-xi2ch0-6').each(($el, index, list) => {

      cy.wrap($el).children().click()

    })

  })

And this.

 it('test', () => {
    cy.visit('https://www.cypress.io/')

    cy.get('li.header__NavItem-xi2ch0-6').each(($el, index, list) => {

      cy.wrap($el).children().and('have.attr', 'href').then((href) => {
        cy.log(href)


        cy.visit('https://www.cypress.io/' + href)


      })

    })

 })

However, cypress throws me an error of DOM detach.

CypressError: cy.children() failed because this element is detached from the DOM.

...

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

The previous command that ran was:

cy.wrap()

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

Common situations why this happens: - Your JS framework re-rendered asynchronously - Your app code reacted to an event firing and removed the element

You typically need to re-query for the element or add 'guards' which delay Cypress from running new commands.

cypress mocha.js javascript
1 Answers

You can use cy.visit with the href attribute, then write an assertion and go back easily xD

cy.get('li').each((item) => {
  const title = item.find('h1').first().text();
  const link = item.find('a').first();

  cy.visit(link.attr('href'));

  cy.get('h1').should('have.text', title);
  cy.go('back');
});
user_64576270
Related