Waiting

Examples of waiting for an amount of time or resource to resolve in Cypress, for a full reference of commands, go to docs.cypress.io

cy.wait()

To wait for a specific amount of time or resource to resolve, use the cy.wait() command.

<form>
  <div class="form-group">
    <input type="text" class="form-control wait-input1" />
  </div>
  <div class="form-group">
    <input type="text" class="form-control wait-input2" />
  </div>
  <div class="form-group">
    <input type="text" class="form-control wait-input3" />
  </div>
</form>

cy.get('.wait-input1').type('Wait 1000ms after typing')
cy.wait(1000)
cy.get('.wait-input2').type('Wait 1000ms after typing')
cy.wait(1000)
cy.get('.wait-input3').type('Wait 1000ms after typing')
cy.wait(1000)

Waiting does not change the subject

<div id="wait-subject">The subject</div>

cy.wrap('Hello').wait(100).should('equal', 'Hello')
cy.get('#wait-subject')
  .wait(100)
  .should('have.text', 'The subject')
// if there is no subject, yields undefined
cy.wait(100).should('equal', undefined)

Waiting for network

You can wait for a specific route

<button class="network-btn btn btn-primary">Get Comment</button>
<div class="network-comment"></div>
<script>
  function getComment() {
    // we fetch all data from this REST json backend
    const root = 'https://jsonplaceholder.cypress.io'
    $.ajax({
      url: `${root}/comments/1`,
      method: 'GET',
    }).then(function (data) {
      $('.network-comment').text(data.body)
    })
  }
  $('.network-btn').on('click', function (e) {
    e.preventDefault()
    getComment(e)
  })
</script>

// Listen to GET to comments/1
cy.intercept('GET', 'comments/*').as('getComment')

// we have code that gets a comment when
// the button is clicked in scripts.js
cy.get('.network-btn').click()

// wait for GET comments/1
cy.wait('@getComment')
  .its('response.statusCode')
  .should('eq', 200)

Tip: be careful of adding unnecessary wait times, see our Best Practices: Unnecessary Waiting guide.

Waiting on promises

If you want to wait on a promise, use cy.wrap().

const asyncAdd = (a, b) => Promise.resolve(a + b)
const asyncSub = (a, b) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(a - b), 1000)
  })
}

cy.wrap(asyncAdd(2, 3)).should('equal', 5)
cy.wrap(asyncSub(2, 3)).should('equal', -1)

More information:

• Asserting Network Calls from Cypress Tests blog post
• Unit testing application code recipe
• Avoid hard-coded waits using built-in retry-ability