DEV Community

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

Posted on • Updated on

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

Today in "Pinches of Cypress", learn a mechanism to make your tests more robust

Imagine an application for notes' creation.

After logging into the application, the user is redirected to a list of all their notes.

After creating, editing, or deleting a note, it is also directed to the same notes list.

Let's look at an example.

describe('Notes', () => {
  beforeEach(() => {
    cy.intercept('GET', '**/notes').as('getNotes')

  it('successfully creates a note', () => {
    const myNote = 'Buy coffee'


Enter fullscreen mode Exit fullscreen mode

In the first line inside of the beforeEach function callback, I use cy.intercept() to intercept an HTTP request of type GET for a route that ends with the string /notes, then I create an alias for this request, called getNotes.

Then, right after logging into the application, I use cy.wait(), passing the alias created previously (@getNotes). That way, Cypress will wait for such a request to end before moving on to run the test that successfully creates a note.

Then we arrived at the test itself.

Initially, I store a string in a variable called myNote.

Then I perform the steps to create a note, where I first click on a link, I type the note into a text field, and finally, I click on a button that has the text 'Create'.

Before the verification, I call cy.wait() again, passing the alias created previously (@getNotes) to wait for the request to finish before moving on.

Finally, with the request complete, I check that my note is visible. 🥳

Did you like it?

I'm looking forward to hearing your feedback!

This post was originally published in Portuguese on the Talking About Testing blog.

Would you like to learn about test automation with Cypress? Get to know my online courses on Udemy.

Discussion (2)

shanim profile image

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



walmyrlimaesilv profile image
Walmyr Filho Author

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