Question 244518 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to redirect inside `each` loop without error?

When user click to $clickableCardEl it redirects to another page

it('cards should not to redirect to 404 page', () => {
    cy.getByCyId('clickable-card').each($clickableCardEl => {
      cy.wrap($clickableCardEl).click().wait(3000);
      cy.getByCyId('not-found-content').should('not.exist');
      cy.go('back');
    });
  });

And I get this error

cy.click() failed because the page updated as a result of this
command, but you tried to continue the command chain. The subject is
no longer attached to the DOM, and Cypress cannot requery the page
after commands such as cy.click().

I want to iterate all $clickableCardEl inside each loop and click on them.

Tags:

2

Answers


  1. 0

    try following

    it('cards should not redirect to 404 page', () => {
      cy.getByCyId('clickable-card').each(($clickableCardEl) => {
        cy.location('pathname').then((initialPathname) => {
          cy.wrap($clickableCardEl).click().wait(3000);
    
          cy.location('pathname').then((newPathname) => {
            if (initialPathname !== newPathname && newPathname === '/404') {
              cy.log('Card led to 404 page');
            } else {
              cy.log('Card did not lead to 404 page');
            }
    
            cy.go('back');
          });
        });
      });
    });
    Login or Signup to reply.
  2. 0

    I want to iterate all $clickableCardEl inside each loop… – it’s not possible, the page refreshes with each click.

    I want to test all cards should not to redirect to 404 page – it’s possible because you can use cy.request() to test links.

    const failedCards = []

cy.getByCyId('clickable-card').each($clickableCardEl => {
  cy.wrap($clickableCardEl).invoke('attr', 'href')
    .then((href) => {
      cy.request({ url: href, failOnStatusCode: false})
        .then(res => {
          if (res.status === 404) {
            failedCards.push($clickableCardEl)
          }
        })
    })
})
.then(() => {
  cy.wrap(failedCards).should('have.length', 0)   // or print the failed items
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search