DEV Community

Cover image for How to wait for a request to finish before moving on with Cypress

How to wait for a request to finish before moving on with Cypress

Walmyr on February 12, 2021

Today in "Pinches of Cypress", learn a mechanism to make your tests more robust Imagine an application for notes' creation. After logging into th...
Collapse
 
rebaiahmed profile image
Ahmed Rebai

What about requests done inside the test itself? Cypress will automatically wait for the request to be done?

Collapse
 
walmyrlimaesilv profile image
Walmyr

Yes, it will.

Collapse
 
shanim profile image
Mandy

Whenever I use cy. wait with cy.intercept I receive the following error. Do you know any workarounds?
ERROR:
Timed out retrying after 5000ms: cy.wait() timed out waiting 5000ms for the 1st request to the route: file. No request ever occurred.

Code:
cy.intercept('POST','**/file',cvUploadResponse).as('file');

cy.wait('@file');

Collapse
 
walmyrlimaesilv profile image
Walmyr

It seems that requests are taking more than Cypress's defaults for such a thing. A way to work around it would be to overwrite the requestTimeout.
I recommend reading the official docs for timeouts docs.cypress.io/guides/references/....

Collapse
 
normanmunge profile image
normanmunge

Have you tried to set the intercept before visiting the page?

Collapse
 
nadaaskora profile image
Nada Ahmed

I tried to make it 20 seconds but still not working

Thread Thread
 
walmyrlimaesilv profile image
Walmyr

Where is it now working?
And what do you mean with trying to wait for 20 seconds?
Are you doing cy.wait(20000)?
If that's the case, I don't recommend doing it.
For more info, read docs.cypress.io/guides/references/....

Thread Thread
 
walmyrlimaesilv profile image
Walmyr

Could you share the code, please?

Thread Thread
 
nadaaskora profile image
Nada Ahmed

here is the code I'm using cypress 10, gql
I am trying to filter items and check for the url if contains the filtered query
Image description

I added the requestTimeout to check if this will work but it didn't
Image description

Thread Thread
 
walmyrlimaesilv profile image
Walmyr

I see, but without having a chance to play with it, it would be difficult to help you out.
I hope you can find a solution for it, and when you do so, share it here.
Good luck!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
walmyrlimaesilv profile image
Walmyr

What do you mean? I didn’t get it.

Collapse
 
nubtester profile image
nubTester

I mean when doing a demo for interview, it is safe not doing wait by API or we will get a feedback like: "Waiting for specific API requests to finish, which will cause the tests to break if the implementation is changed.". The use of the tool depends on the circumstances. No tool is always good or always bad... Sometimes the UI is ready to interact (eg clickable but no function) but we need to wait for the API to finish loading the data before the UI can actually interact. So I think waiting for the API isn't quite as bad as they say...

Thread Thread
 
walmyrlimaesilv profile image
Walmyr

Totally, waiting for a request to finish before moving on is surely a good practice, and it’s even recommended by the Cypress team.
Here’s a chat I had with one of their technical account managers, where we talked about it and other good practices, such as waiting for elements to be visible before interacting with them.
youtu.be/hXfTsdEXn0c

Thread Thread
 
nubtester profile image
nubTester • Edited

Thank you, I love the concept of interception in cypress. There is many useful usecase I've done with it like:

  • Wait API finish before assert/moving UI
  • Modify the response:
    • Filler items in response data so the list item we "care about" will be visible in the screen. It is better for check the video when test failed.
    • Sorted the list items in fixed order so we can assert the UI table easier (Just check it line by line). Its useful for case the items created in random order. Without sorting, the code assert will be very complicated because we must find a row that all the cell is match with our expected.
    • Force some unsable API response as 200. It useful when we must working on unstable environment and some failed API (not related to the feature we want to test) will cause showing error popup and break out test.
  • Skip sent request to the backend. With it we can verify all the posibility of UI inputs without change/create data (no need to prepare many data for each input, no need clear data after test...). Wait for the request and check if request body is match with our UI inputs is greater than verify it by check the result in the UI. Because some input not showing in the UI after all.

Any many more...

I am a developer who just switch to qa for a few years, that what I learn from cypress in 6 month working with it. Thank you for your sharing. It help me got more confident with my knowledge...

Thread Thread
 
walmyrlimaesilv profile image
Walmyr

Yup, I did use it for the same examples too.