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

时间:2018-10-29 21:43:10

标签: cypress

我有一个带有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; 

我该如何实现?

1 个答案:

答案 0 :(得分:6)

在柏树中等待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;