Cypress Wait Until

Profile picture for user arilio666

Waituntil is an external plugin with the power of waiting for virtually everything other than the average wait in cypress.

Table of Content

  1. Install Wait Until Plugin
  2. Syntax
  3. Example

Install Wait Until Plugin

Let us install the plugin.

npm i -D cypress-wait-until

install wait until plugin

Import the following lines in the command.js and the e2e.js file.

import 'cypress-wait-until';
require('cypress-wait-until')

Syntax

cy.waitUntil(()=> //any cypress commands goes here to wait for)

Options:

  • errorMsg: Ovverides the default error message and provides the specified custom error message.
  • Timeout: Waits for up to 5000ms, which is the default.
  • Interval: performs the check every 200ms, which is the default.
  • Description: The type is a string, and it is used to log the name into the cypress test runner.
  • Logger: Custom logger in the place of default cypress.log.
  • Custom message: string logged after the options.description.

Example

Let us see the waitUntil in action with a simple example.

  • We will be automating on our traditional programsbuzz site.
  • During the site load-up, there will be an animation after which the buttons and other elements are visible.
  • We will use this as our advantage and use waitUntil the animation is over, and the login element is visible for us to extract its text.
it('WaitUntil',()=>{
    cy.visit('https://www.programsbuzz.com/')
    cy.waitUntil(() => cy.get("a[href='/user/login']").invoke('text').then((textt) => cy.log(textt)))
})

wait until animation

  • We can see that the command has passed and waited until the initial animation load up and extracted the text from the element we specified.

About WaitUntil:

  • Could waitUntil command avoid failing the test? No, it waits sometimes for the things that must happen, and it will fail otherwise.
  • There are some cases where conditional testing makes sense, but cypress enforces to avoid that cy.waitUntil would have this capability that everyone will use to create conditional tests.

Conclusion:

So this is how we can use the waitUntil command in cypress, and there are many other ways we can pair this up with additional commands and utilize the power of wait.