How to do polling in Cypress?

In Cypress, performing polling is a common requirement, especially when dealing with asynchronous operations and waiting for specific conditions to be met. Cypress provides several built-in methods for handling polling, with the most common approach being the use of the .should() command combined with assertions, or the .wait() method.

Using .should() for Polling

In Cypress, the .should() method can be used to repeatedly assert whether a condition is satisfied. Cypress automatically polls until the assertion succeeds or the specified timeout is exceeded. This is the recommended approach for polling element states or certain attributes.

Example:

Suppose we have a progress bar, and we want to ensure it eventually reaches 100%. We can write the test code as follows:

javascript
cy.get('.progress-bar').should('have.attr', 'value', '100');

This command repeatedly checks the value attribute of the progress bar until it equals 100. By default, Cypress has a timeout of 4 seconds, and you can customize it by passing an option.

Using .wait() and Conditional Statements for Polling

Although .should() is the recommended polling method, in complex scenarios, more flexible control may be needed. In such cases, the .wait() method combined with JavaScript conditional statements can be used to implement polling.

Example:

Suppose we have an asynchronous data loading process, and we need to poll to check if the data has been loaded.

javascript
function checkDataLoaded() {
  return new Cypress.Promise((resolve, reject) => {
    // Simulate a function to check if data is loaded
    const isLoaded = checkIfDataIsLoaded(); // This should be an actual check function
    if (isLoaded) {
      resolve();
    } else {
      setTimeout(() => {
        checkDataLoaded().then(resolve).catch(reject);
      }, 1000); // Check every second
    }
  });
}

cy.wrap(null).then(() => {
  return checkDataLoaded();
});

In this example, we create a custom polling mechanism that checks every second whether the data has been loaded. This method provides greater flexibility and can be applied to complex scenarios that Cypress's default commands cannot easily handle.

Summary

Cypress offers powerful polling mechanisms, and in most cases, the .should() method is recommended as it is simple and aligns with Cypress's design philosophy. For more complex polling requirements, combining .wait(), custom JavaScript functions, and Promises can provide finer control. In practical test development, choosing the right method is crucial for improving test efficiency and stability.