Cypress runner not waiting for page to load before running assertion

Question

I'm using cypress to run end to end tests, and at some point during the scenario, I click on a button that triggers multiple requests to a backend API and to Stripe's API. Once all the requests are successful, there is a redirection. I'm trying to assert that the URL contains a keyword that would confirm that the redirection was successful.

cy.get('[data-cy="payment-form-submit"]').click()
cy.url().should('include', 'somekeyword')

Unfortunately, Cypress does not wait for all the request to resolve before evaluating cy.url() so the assertion always fails despite the redirect being successful.

I've read in the documentation that it was supposed to wait, but couldn't verify it in practice. Am I missing something here? How should I solve this?

Answer 1

The .should() command will retry the preceding command, which you can see if you run the equivalent with a callback and log each call

cy.url().should(url => {
  console.log(url)                           // 170+ logs in 4 seconds
  expect(url).to.include('somekeyword');
})

It is likely you need a longer timeout,

cy.url({ timeout: 10000 }).should('include', 'somekeyword');

Answer 2

You can try.then() operation, it explicitly waits for the operation to be completed.

cy.get('[data-cy="payment-form-submit"]').click().then(()=>{
cy.url().should('include', 'somekeyword')
});

https://example.cypress.io/commands/connectors#then

Answer 3

You should utilise the as() method on cy.intercept so that you correctly wait for all of the requests to complete before moving on to verify that the URL has changed.