DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,673 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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')
    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')
  })
})
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.

Top comments (10)

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 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 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 Filho Author

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 Filho Author

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 Filho Author

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
 
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 Filho Author

Yes, it will.

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›