CODEWITHSUNDEEP
cypress
Madhawa
Madhawa

Reputation: 1

Cypress error: cy.find() failed because the page updated as a result of this command, but you tried to continue the command chain

I wrote the following to select values of a dropdown and assert selected value to make sure it is selected, one by one.

When("User should see example Cover option with values {string}", (exampleCovers) => {
  const exampleCover = exampleCovers.split("|");
  exampleCover.forEach(chooseCoverLimit);

  function chooseCoverLimit(item) {
    acoSection.popups(`aco_popup`).as('popupACO').then(function () {
      cy.get('@popupACO').contains('text');

      acoSection.dropDowns(`example_cover`).as('coverLimit').select(item, { force: true }).then(function () {
      cy.get('@coverLimit').find(':selected').should('have.text', item)
    })
  })
  }
});

This works locally on Cypress Test Runner, as well as through headless from the CLI.

Cypress results on local machine CLI

But when I run on Jenkins, some tests get failed.

Cypress results on Cypress Cloud

I get the following CypressError on Cypress Cloud.

Timed out retrying after 10000ms: cy.find() 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.find().

Common situations why this happens:

Your JS framework re-rendered asynchronously Your app code reacted to an event firing and removed the element You can typically solve this by breaking up a chain. For example, rewrite:

cy.get('button').click().should('have.class', 'active')

to

cy.get('button').as('btn').click()

cy.get('@btn').should('have.class', 'active')

https://on.cypress.io/element-has-detached-from-dom

As per the suggestion, I tried breaking cy.get('@coverLimit').find(':selected').should('have.text', item) into two but it still didn't solve the problem. The same code works for one environment but not another.

Upvotes: 0

Views: 4495

Answers (1)

Madhawa
Madhawa

Reputation: 1

I've made following changes to make it work.

When("User should see example Cover option with values {string}", (exampleCovers) => {
  const exampleCover = exampleCovers.split("|");
  exampleCover.forEach(chooseCoverLimit);

  function chooseCoverLimit(item) {
    acoSection.popups(`aco_popup`).as('popupACO').then(function () {
      cy.get('@popupACO').contains('text')

      acoSection.dropDowns(`example_cover`).select(item, { force: true }).then(function () {     
        acoSection.dropDowns(`example_cover`).find(':selected').should('have.text', item).wait(1000)
    })
  })
  }
});

Upvotes: 0

Related Questions