Jennifer Mann
6.4 KiB
title, comments, description
| title | comments | description |
|---|---|---|
| wait | true |
Use cy.wait to wait for a number of milliseconds or for a resource to resolve.
| Returns | the current subject if waiting for number of milliseconds, the xhr object if waiting for a route |
| Timeout | cy.wait will wait for the request the duration of the requestTimeout and wait for the response for the duration of the responseTimeout or it will wait for both the duration request and response for the timeout specified in the command's options. |
cy.wait( number )
Wait a specific amount of ms before resolving and continuing onto the next command.
cy.wait( alias )
Wait until the matching aliased XHR has a response.
{% note info New to Cypress? %} Read about Network Requests and Aliasing first. {% endnote %}
cy.wait( [alias1, alias2, alias3] )
Wait for an array of aliases to have responses.
Options
Pass in an options object to change the default behavior of cy.wait.
| Option | Default | Notes |
|---|---|---|
timeout |
requestTimeout, responseTimeout | Override the default requestTimeout and responseTimeout (in ms) |
log |
true |
whether to display command in command log |
You can also change the default requestTimeout and responseTimeout that all cy.wait use in configuration.
Number Usage
Wait 500ms
// Wait 500ms before resolving
cy.wait(500)
Alias Usage
Wait for a specific XHR to respond
// Wait for the route aliased as 'getAccount' to respond
// without changing or stubbing its response
cy
.server()
.route(/accounts\/d+/).as("getAccount")
.visit("/accounts/123")
.wait("@getAccount").then(function(xhr){
// we can now access the low level xhr
// that contains the request body,
// response body, status, etc
})
Wait automatically increments responses
// each time we cy.wait() for an alias, Cypress will
// wait for the next nth matching request
cy
.server()
.route(/books/, []).as("getBooks")
.get("#search").type("Grendel")
// wait for the first response to finish
.wait("@getBooks")
// the results should be empty because we
// responded with an empty array first
.get("#book-results").should("be.empty")
// now re-route the books endpoint and force it to
// have a response this time
.route(/books/, [{name: "Emperor of all maladies"}])
.get("#search").type("Emperor of")
// now when we wait for 'getBooks' again, Cypress will
// automatically know to wait for the 2nd response
.wait("@getBooks")
// we responded with 1 book item so now we should
// have one result
.get("#book-results").should("have.length", 1)
Alias Array Usage
You can pass an array of aliases that will be waited on before resolving.
cy
.server()
.route(/users/).as("getUsers")
.route(/activities/).as("getActivities")
.route(/comments/).as("getComments")
.visit("/dashboard")
.wait(["@getUsers", "@getActivities", "getComments"])
.then(function(xhrs){
// xhrs will now be an array of matching XHR's
// xhrs[0] <-- getUsers
// xhrs[1] <-- getActivities
// xhrs[2] <-- getComments
})
You could also use the cy.spread command here to spread the array into multiple arguments.
cy
.server()
.route(/users/).as("getUsers")
.route(/activities/).as("getActivities")
.route(/comments/).as("getComments")
.wait(["@getUsers", "@getActivities", "getComments"])
.spread(function(getUsers, getActivities, getComments){
// each XHR is now an individual argument
})
Notes
requestTimeout and responseTimeout
cy.wait goes through two separate "waiting" periods for a matching XHR.
The first period waits for a matching request to leave the browser. This duration is configured by requestTimeout - which has a default of 5000 ms.
This means that when you begin waiting for an XHR, Cypress will wait up to 5 seconds for a matching XHR to be created. If no matching XHR is found, you will get an error message that looks like this:
Once Cypress detects that a matching XHR has begun its request it then switches over to the 2nd waiting period. This duration is configured by responseTimeout - which has a default of 20000 ms.
This means Cypress will now wait up to 20 seconds for the external server to respond to this XHR. If no response is detected, you will get an error message that looks like this:
This gives you the best of both worlds - a fast error feedback loop when requests never go out, and a much longer duration for the actual external response.
Command Log
Wait for the put to user to resolve.
cy
.server()
.route("PUT", /users/, {}).as("userPut")
.get("form").submit()
.wait("@userPut")
.its("url").should("include", "users")
The commands above will display in the command log as:
When clicking on wait within the command log, the console outputs the following:
