[Cypress] Wait for XHR Responses in a Cypress Test

When testing interactions that require asynchronous calls, we’ll need to wait on responses to make sure we’re asserting about the application state at the right time. With Cypress, we don’t have to use arbitrary time periods to wait. In this lesson, we’ll see how to use an alias for a network request and wait for it to complete without having to wait longer than required or guess at the duration.

 

Cypress gives us 4 seconds to load the data, but what if the loading time is larger than 4 secods? then test will faild.

To prevent this, we as let Cypress wait unitl one XHR request finish to run the test:

    it('should have four initial todos and waiting loaded', function () {
        cy.server();
        cy.route('GET', '/api/todos', 'fixture:todos')
            .as('loadingTodos');
        cy.visit('/');
        cy.wait('@loadingTodos');

        cy.get('.todo-list > li')
            .should('have.length', 4);
    });