Cypress - wait for xhr request which triggered by UI operation

Question

I have an app with select element, when changing the select value, the page makes an XHR request to load some data and insert it to a table. I want cypress to wait till the request end, and after the data rendered on the table, then to check the number of table rows.

this is the code I currently have:

    cy.get('[name="pageselct"]').select('300'); // fire a request to load data

    // the below line get executed before the data actually loaded: 
    const totalTableRows = cy.get('#listingsData > tr').length; 

how can I achieve it?

Answer 1

Waiting for XHRs is easy in cypress. See https://docs.cypress.io/api/commands/wait.html#Alias for more info.

// Start the server that waits for routes
cy.server();

// Set the XHR up as a route, do not mock the return (unless you want to)
cy.route("GET", "/xhr/to/wait/for").as("getData");

// Fire a request to load data
cy.get('[name="pageselct"]').select('300');

// Wait for the route to complete
cy.wait("@getData");

// The below line will not get executed before the data actually loaded
const totalTableRows = cy.get('#listingsData > tr').length;