As a QA professional, you know that ensuring the reliability and stability of your test suites is crucial to the success of your projects. In Cypress, you have access to a range of features that can help you control the timing of your test actions, including implicit and explicit waits.

In this blog post, we’ll take a deep dive into the world of implicit and explicit waits in Cypress, covering the basics of both types of wait, providing examples of how to use them in tests, and comparing the pros and cons of each. We’ll also provide guidance on when to use each type of wait and help you avoid common pitfalls.

Let’s get started!

What is an Implicit Wait in Cypress?

An implicit wait is a setting that tells Cypress to wait for a certain amount of time before timing out if an element is not found on the page. This can be useful if the element you are trying to interact with is not immediately available, but is expected to appear after a certain amount of time.

By default, the implicit wait time in Cypress is 4 seconds. You can change the implicit wait time by using the cy.wait() command with a time argument:

// Set the implicit wait time to 2 seconds
Cypress.config('defaultCommandTimeout', 2000)

Here is an example of how to use an implicit wait in a Cypress test:

cy.visit('https://example.com')

// Wait for 2 seconds before timing out if the element is not found
cy.get('#some-element', {timeout: 2000}).should('be.visible')

In this example, we use the cy.get() command to retrieve an element with the #some-element id. We then pass a timeout option to the command with a value of 2000 milliseconds (2 seconds). This tells Cypress to wait for 2 seconds before timing out if the element is not found on the page.

It’s important to note that implicit waits can slow down your tests if used excessively, as the test will wait for the specified amount of time before timing out even if the element is immediately available. This can be particularly problematic if you are working with a slow-loading website or if you have a large number of elements on the page.

What is an Explicit Wait in Cypress?

An explicit wait, on the other hand, is a way to pause the test and wait for a specific condition to be met before moving on to the next action. You can use the cy.wait() command with a condition argument to create an explicit wait. For example, you can use cy.wait() to wait until an element becomes visible or until a specific text appears on the page.

Here is an example of how to use an explicit wait in a Cypress test:

cy.visit('https://example.com')

// Wait until an element becomes visible
cy.wait('#some-element').should('be.visible')

In this example, we use the cy.wait() command to pause the test and wait until the element with the #some-element ID becomes visible. Once the element becomes visible, the test will continue and the should() command will be executed, asserting that the element is visible.

Explicit wait can be more precise and efficient than implicit wait, as it waits for a specific condition to be met rather than a fixed amount of time. However, it does require more setup than implicit wait, as you need to define the waiting condition and any relevant aliases or routes.

Advanced Usage Scenarios for Implicit and Explicit Wait

Now that we’ve covered the basics of implicit and explicit wait in Cypress, let’s take a look at some advanced usage scenarios for these features.

Aliases and Route Commands

One advanced usage scenario for both implicit and explicit wait is working with server responses in your tests. In Cypress, you can use the cy.server() and cy.route() commands to intercept and mock server responses, allowing you to control the data that is returned to your tests.

Here is an example of how to use an explicit wait with the cy.wait() command and a server alias to wait for an API response:

cy.server()
cy.route('POST', '/api/endpoint').as('apiCall')

// Make the API call
cy.request({
  method: 'POST',
  url: '/api/endpoint',
  body: { data: 'some data' }
})

// Wait for the API response
cy.wait('@apiCall').then((response) => {
  // Assert on the response
  expect(response.status).to.equal(200)
  expect(response.body).to.have.property('success', true)
})

In this example, we first set up a server and route to intercept the POST request to the /api/endpoint URL. We then use the cy.request() command to make the actual API call.

Next, we use the cy.wait() command with the @apiCall alias to wait for the response from the API. The @apiCall alias corresponds to the route we set up earlier using the cy.route() command. We can then use the then() function to access the response object and perform assertions on it.

Custom Wait Functions

In addition to the built-in wait commands in Cypress, you can also create your own custom wait functions to use in your tests. This can be useful if you want to create more complex or specialized waiting conditions that are not covered by the built-in commands.

To create a custom wait function, you can use the cy.waitUntil() command and pass a function as the condition argument. The function should return a boolean value indicating whether the wait condition has been met.

Here is an example of a custom wait function that waits for an element to have a specific CSS class:

const waitForClass = (className) => {
  cy.waitUntil(() => {
    return cy.get('#some-element').then((el) => {
      return el.hasClass(className)
    })
  })
}

// Use the custom wait function
waitForClass('active')

In this example, we define a custom wait function called waitForClass() that takes a class name as an argument. The function uses the cy.waitUntil() command and a condition function to wait until the element with the #some-element ID has the specified class.

Custom wait functions can be useful if you want to create more specialized waiting conditions that are not covered by the built-in commands

Pros and Cons of Implicit and Explicit Wait

Now that we’ve covered the basics of implicit and explicit wait in Cypress and some advanced usage scenarios, let’s take a look at the pros and cons of each type of wait.

Implicit Wait

Pros ✅

• Implicit wait is simple to use and requires minimal setup.
• It can be useful if you are interacting with an element that is not immediately available on the page, but is expected to appear after a certain amount of time.
• It can be useful if you are working with a slow-loading website or if you have a large number of elements on the page.

Cons ❌

• Implicit wait can slow down your tests if used excessively, as the test will wait for the specified amount of time before timing out even if the element is immediately available.
• It can be less precise and efficient than explicit wait, as it waits for a fixed amount of time rather than waiting for a specific condition to be met.

Explicit Wait

Pros ✅

• Explicit wait can be more precise and efficient than implicit wait, as it waits for a specific condition to be met rather than a fixed amount of time.
• It can be useful in situations where you need to wait for a specific condition to be met before moving on with the test, such as waiting for an element to become visible or for a specific text to appear on the page.

Cons ❌

• Explicit wait requires more setup than implicit wait, as you need to define the waiting condition and any relevant aliases or routes.
• It can be more complex to use than implicit wait, as you need to write a condition function or use a built-in condition command.

Conclusion

Implicit and explicit wait in Cypress are powerful tools that can help you control the timing of your test actions and ensure the reliability and stability of your test suites. While both types of wait have their pros and cons, it’s important to choose the right one for your specific use case to ensure that your tests are efficient and effective.

I hope this blog post has provided you with a comprehensive overview of implicit and explicit wait in Cypress and helped you understand how to use them effectively in your tests.

Remember, implicit wait is a setting that tells Cypress to wait for a certain amount of time before timing out if an element is not found on the page. This can be useful if the element you are trying to interact with is not immediately available, but is expected to appear after a certain amount of time.

On the other hand, explicit wait is a way to pause the test and wait for a specific condition to be met before moving on to the next action. You can use the cy.wait() command with a condition argument to create an explicit wait.

Both implicit and explicit wait can be useful in different scenarios, depending on your specific needs. Just be sure to choose the right type of wait for your use case and consider the pros and cons of each to ensure that your tests are efficient and effective.

Happy testing!