Cypress

Question

我有一个带有 select 元素的应用程序，当更改 select 值时，页面发出 XHR 请求以加载一些数据并将其插入到 table。我希望 cypress 等到请求结束，并在 table 上呈现数据后检查 table 行数。

这是我目前拥有的代码：

    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

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

Cypress - 等待由 UI 操作触发的 xhr 请求

Cypress - wait for xhr request which triggered by UI operation