How to make Cypress wait for undetermined amount of XHR requests

0
votes

In my React app, when users logs in, they get redirected to dashboard. Then, app sends a requests to "/files" endpoint, which returns paths to static files which should be then fetched one by one by separate requests like GET https://api_address/static_file/xxx The problem is, that number is never the same. Sometimes it's 10, sometimes 16 etc. Until these resources finish fetching the app displays loading screen. How can I make Cypress wait till all responses finish? I tried cy.wait() but it waits only for the first request of that type. I can't create multiple cy.wait() because as I said, I don't know the amount of the requests. I thought about trying to cy.get() the dashboard div (dashboard shows only after fetching is finished) and set the retry timeout to a really big number, but that will make my tests unnecessarily slow - as I said, the number of requests is random, it can even be 1 request. Is there any way to make cypress wait till there are no active requests of specific type? Or maybe you know another way to solve this problem?

1
javascriptreactjstestingcypresse2e-testing
How does waiting for the "dashboard div" slow things down? That seems like an optimal way to wait since it loads after all other unknown content loads. – GrayDwarf
Ok, you made me realize that I misunderstood cy.get() timeout. Theoretically, I could set that timeout to like 2 minutes but it will return the element as soon as it appears (it won't wait whole 2 minutes). It's not a pretty solution, but it should work. – ard_evon

1 Answers

1
votes

The quickest way would be to wait for the loading indicator to disappear.

cy.get('.static-files-loading-indicator', {timeout:30000}).should('not.exist');

This assertion will retry for up to 30 seconds. See the documentation here:

🚨 If the assertion that follows the cy.get() command fails, then the cy.get() command will requery the application’s DOM again. Then Cypress will try the assertion against the elements yielded from cy.get(). If the assertion still fails, cy.get() will try requerying the DOM again, and so on until the cy.get() command timeout is reached.

If this is too flaky, you can intercept the response from the /files request, and inspect the response to get the number of static_files that will be requested. You can set up a cy.wait() for each of those files.