Cypress - ожидание запроса xhr, который запускается операцией интерфейса

Question

У меня есть приложение с элементом select, при изменении значения select страница отправляет XHR-запрос на загрузку некоторых данных и вставку их в таблицу. Я хочу, чтобы Cypress дождался завершения запроса, а после того, как данные отобразились в таблице, затем проверил количество строк таблицы.

это код, который у меня сейчас есть:

    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; 

как мне этого добиться?

Answer 1

Ожидание XHR в кипарисе легко. См. https://docs.cypress.io/api/commands/wait.html#Alias для получения дополнительной информации.

// 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;