赛普拉斯-等待由UI操作触发的xhr请求

Question

我有一个带有select元素的应用程序，更改选择值时，页面会发出XHR请求以加载一些数据并将其插入到表中。我希望赛普拉斯等到请求结束，然后在表上呈现数据之后，再检查表行数。

这是我目前拥有的代码：

    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;