Cypress not retrying assertion

user_14221649 0
Viewed 1633

My Cypress test is acting inconsistently due to an assertion set on header text. Here is my code:

cy.get('.heading-large').should('contain', 'dashboard') // passes
cy.contains('View details').first().click()
cy.get('.heading-large').should('contain', 'Registration details') // sometimes fails

If it fails, it is because the heading still contains 'dashboard' - Cypress appears not to have retried but gives error Timed out retrying: expected '<h1.heading-large>' to contain 'Registration details'

From reading about Cypress retry-ability, my understanding is that the should assertion should keep trying until timeout, which is set as "defaultCommandTimeout" : 5000. This feels true even if I have an element with the same identifier across two pages. There are no major performance issues with the app I'm testing.

The test seems more likely to fail if I am not watching the window and this issue looks like a possible cause.

Can anyone help determine: is there an issue with my test or Cypress, and how might I improve the test? I'm using Cypress 5.1.0 and Chrome 85 on MacOS Catalina.

cypress
2 Answers

It is failing occasionally because the request that fills the header with information has not resolved by the time the timeout has been reached.

You can solve this by setting up a route with a route alias to wait for that exact response from the request to resolve before you proceed with the click.

In other words, When you click(), there is a request sent that grabs the information you want to check for in the next get(). This response for this request has sometimes not resolved by the time your get() reaches timeout. You could increase the timeout but that's not recommended and not good practice here. Instead, wait for that specific response with route & route alias. If you do that, in every case, the last get() won't get called until the information it is looking for has been resolved.

I don't know your request but it would work something like this:

// setup the route and alias
cy.server()
cy.route("/youRequestUrlHere").as("myLovelyAlias")

// first get 
cy.get('.heading-large').should('contain', 'dashboard')
// this click fires the request url from route() above
cy.contains('View details').first().click()

// wait for route to resolve using route alias
cy.wait("@myLovelyAlias").then((response) => {
  // next get called after response resolves
  cy.get('.heading-large').should('contain', 'Registration details')
}

Reference:

edit:

As mentioned above, you could also cheat and set the defaultCommandTimeout to a higher number but that is not recommended because you could still run into cases where the response resolution takes longer than the timeout you've set. The route/wait pattern is the better, more stable approach.

Just in case you want to know how its done though, you would change your get() to something like:

cy.get('.heading-large', {defaultCommandTimeout: 60000}).should('contain', 'Registration details')

Again, other way would be much better.

Reference:

user_65600680
user_142216490
Related