cypress-wait-if-happens

cypress-wait-if-happens

A better cy.wait command

• if the request happens, yields the intercept
• if the request does not happen within the timeout, yields undefined
• can yield the response body via the option yieldResponseBody: true
• can yield the last intercept via the option lastCall: true
• includes types in src/index.d.ts
• good to use in combination with the cypress-if plugin

import 'cypress-wait-if-happens'
cy.waitIfHappens({
  alias: '@users',
  timeout: 100,
  lastCall: true,
  yieldResponseBody: true,
})
  // we should get the list with 4 users
  // because that is the last call that happens
  .should('have.length', 4)

Install

Add this plugin as a dev dependency to your project

# if using NPM
$ npm i -D cypress-wait-if-happens
# if using Yarn
$ yarn add -D cypress-wait-if-happens

Use

Import the plugin in your spec or support file

import 'cypress-wait-if-happens'

Wait for a network call

// timeout is in milliseconds
// by default timeout is the current default command timeout
cy.waitIfHappens(alias, timeout)

The above command does NOT fail if the network call is not made within timeout ms. You can yield the intercept or undefined to the next command

cy.waitIfHappens(alias, timeout).then((intercept) => {
  if (!intercept) {
    // the call has not happened
  } else {
    // the intercepted call, same as
    // the value yielded by cy.wait(alias)
  }
})

Options object

cy.waitIfHappens(alias, timeout)
// equivalent to using an options object
cy.waitIfHappens({ alias, timeout })

Yield the response body

Note: requires using the options object

Because yielding the response body is so common, you can yield it (if the network call happens)

cy.waitIfHappens({
  alias,
  timeout,
  yieldResponseBody: true,
}).then((body) => {
  if (body) {
    // there was a network call
    // and we intercepted it
  } else {
    // no network call made
  }
})

Yield the last call

Note: requires using the options object

The command cy.wait takes each network call one by one. If you are not sure how many calls there are, it is hard to say how many times to call cy.wait. In this plugin, you can take all current calls that have happened and yield the last one

cy.waitIfHappens({
  alias,
  timeout,
  lastCall: true,
}).then((intercept) => {
  if (intercept) {
    // we waited until a call was made
    // or if there were already multiple calls
    // we get the last intercept object
  } else {
    // no matching network call made at all
  }
})

Waiting for the last call automatically waits for all of them by calling cy.wait repeatedly. If there are no calls made yet, waits up to the timeout period.

Using with cypress-if

This plugin works great in combination with the cypress-if plugin. See more examples in if.cy.js

cy.waitIfHappens({
  alias: '@users',
  timeout: 2000,
  yieldResponseBody: true,
})
  .if()
  .its('length')
  .then((n) => {
    cy.log(`got ${n} users`)
  })

Tested with Cypress v10 and v9

Small print

Author: Gleb Bahmutov <[e-mail]> © 2022

• @bahmutov
• glebbahmutov.com
• blog
• videos
• presentations
• cypress.tips
• Cypress Tips & Tricks Newsletter
• my Cypress courses

License: MIT - do anything with the code, but don't blame me if it does not work.

Support: if you find any problems with this module, email / tweet / open issue on Github

MIT License

Copyright (c) 2022 Gleb Bahmutov <[e-mail]>

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.