Cypress: How to write tests to handle slow backend services?

Question

I am working on a Cypress test set expected for validating a React website from STAGE to DEMO to PROD. The React components are generated using Redux pulling data from multiple backend services.

For DEMO and PROD, performance from backend services is optimal, and loading the React components is minimal delay, 5 seconds max.

For STAGE, the loading of the React components has a truly significant delay, 30+ seconds to rediculous 120 seconds. Yet, the components eventually render.

Cypress tests work 100% fine with both DEMO and PROD. I set the default timeout in cypress.json to 60000 ms, but this long of default timeout is not necessary for these deployment environments.

However, the same Cypress tests ran against the same React site on STAGE deployment, cy.visit() and cy.get() fails often, even if I set timeout to 120000 ms. Even if I add retry to 3, it fails.

So, how should best address Cypress waiting for React component loading because of unpredictable response from backend services?

Thank you, much appreciate the assistance

Answer 1

@MarionMorrison @AlapanDas, thank you for your responses

I did resolve the problem within another posting which I did not realize at the time were the same question:

Cypress: Wait for unpredictable component to render from an exclusive set?

I have been using both Cypress contains and npm cypress-wait-until for resolve waiting for slow backend service responses.