How do I wait for a page to load in cypress?

When conducting end-to-end tests with Cypress, waiting for the page to load is a critical step. Typically, Cypress automatically waits for the page to load and executes commands. However, in certain situations, you might need to explicitly wait for the page or resources to finish loading. Here are several methods:

1. Automatic Waiting for DOM Elements

Cypress automatically waits for elements to be visible and interactable. For example, after using cy.visit() to navigate to a page, Cypress waits for the page to load. When using cy.get() to retrieve DOM elements, Cypress waits for the element to be present in the DOM.

javascript
cy.visit('https://example.com');
cy.get('.important-element').should('be.visible');

In the above code, Cypress waits for the .important-element to be present and visible after navigating to example.com.

2. Explicit Waiting

If you need to wait for a specific duration, you can use cy.wait().

javascript
cy.visit('https://example.com');
cy.wait(5000); // Wait for 5000 milliseconds
cy.get('.important-element').should('be.visible');

3. Waiting for AJAX Requests

If the page loading involves asynchronous AJAX requests, you can use cy.wait() to wait for these requests to complete.

javascript
cy.server();
cy.route('GET', '/api/data').as('getData');
cy.visit('https://example.com');
cy.wait('@getData');

In the above code, Cypress waits for the AJAX request matching the alias getData to complete.

4. Checking Page Load Status

Sometimes, you may need to verify if the page has fully loaded. You can inspect the document.readyState property to determine the page loading status, for example:

javascript
cy.window().then((win) => {
  cy.wrap(win.document.readyState).should('eq', 'complete');
});

Example

Suppose I am testing a complex single-page application (SPA) that loads data from multiple APIs. I might use the following approach to ensure that the relevant data and elements have loaded:

javascript
cy.visit('/dashboard');

// Assume an overview panel appears after data loading
ncy.get('.overview-panel').should('be.visible');

// Assume the page makes multiple API requests to populate data tables
ncy.server();
cy.route('GET', '/api/users').as('loadUsers');
cy.route('GET', '/api/products').as('loadProducts');
// Then wait for these requests to succeed
ncy.wait('@loadUsers');
cy.wait('@loadProducts');

// Finally, check if tables are populated
ncy.get('.user-table').find('tr').should('have.length.greaterThan', 1);
cy.get('.product-table').find('tr').should('have.length.greaterThan', 1);

In actual Cypress tests, it is generally unnecessary to add excessive explicit waits because Cypress's default command queue automatically handles most waiting scenarios. However, when handling complex asynchronous operations, the provided methods can help ensure your test scripts execute stably and correctly wait for necessary page loading processes.

You can add assertions in your test code:

shell
cy.click('#someButtonToNavigateOnNewPage');
cy.location('pathname', {timeout: 60000})
  .should('include', '/newPage');
cy.click('#YouAreOnNewPage');

You can adjust the default timeout, which is 4000 milliseconds (4 seconds), to ensure the page loads completely.