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')
    cy.login()
    cy.wait('@getNotes')
  })

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

    cy.get('[href="/notes/new"]').click()
    cy.get('#content').type(myNote)
    cy.contains('Create').click()
    cy.wait('@getNotes')

    cy.contains(myNote).should('be.visible')
  })
})

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.