Cypress: how to wait for all requests to finish

3
votes

I am using cypress to test our web application.

In certain pages there are different endpoint requests that are executed multiple times. [ e.g. GET /A GET /B GET /A].

What would be the best practise in cypress in order to wait for all requests to finish and guarantee that page has been fully loaded.

I don't want to use a ton cy.wait() commands to wait for all request to be processed. (there are a lot of different sets of requests in each page)

2
cypress
See this tutorial When can the test start - it may not be sufficient to wait for all cy.route() to happen, better to find some indicator in the DOM. I usually look for some content (text, image) that I know will be the last loaded. – Richard Matsen

2 Answers

2
votes

According to Cypress FAQ there is no definite way. But I will share some solutions I use:

  1. Use the JQuery sintax supported by cypress

    $('document').ready(function() { //Code to run after it is ready });

The problem is that after the initial load - some action on the page can initiate a second load.

  1. Select an element like an image or select and wait for it to load. The problem with this method is that some other element might need more time.

  2. Decide on a maindatory time you will wait for the api requests (I personaly use 4000 for my app) and place a cy.wait(mandatoryWaitTime) where you need your page to be loaded.

1
votes

You can use the cy.route() feature from cypress. Using this you can intercept all your Get requests and wait till all of them are executed:

cy.server()
cy.route('GET', '**/users').as('getusers')
cy.visit('/')
cy.wait('@getusers')