如何在 Cypress 中等待两个并行的 XHR 请求

在 Cypress 中处理并行的 XHR 请求，我们通常会利用 Cypress 的 cy.intercept() 方法来监听网络请求，并使用 cy.wait() 方法来等待这些请求完成。以下是详细的步骤和一个例子：

步骤

1. 定义请求: 使用 cy.intercept() 来定义我们想要监听的请求。我们可以通过方法、URL 等属性来指定具体的请求。

2. 别名赋值: 给这些监听的请求分别设定别名，这样我们可以在后续的测试中引用它们。

3. 触发请求: 执行可能会触发这些请求的操作，比如点击按钮、提交表单等。

4. 等待请求完成: 使用 cy.wait() 与之前设定的别名来等待一个或多个请求完成。

示例

假设我们有一个页面，在这个页面上，用户点击一个按钮后会并行触发两个XHR请求：一个是获取用户信息，另一个是获取用户的订单详情。

javascript
describe('并行XHR请求测试', () => {
  it('应当正确等待两个并行的XHR请求', () => {
    // 监听第一个XHR请求
    cy.intercept('GET', '/api/users/*').as('getUser');
    // 监听第二个XHR请求
    cy.intercept('GET', '/api/orders/*').as('getOrders');

    // 触发XHR请求
    cy.visit('/some-page');
    cy.get('#load-data').click(); // 假设这个按钮触发上述请求

    // 等待两个请求都完成
    cy.wait(['@getUser', '@getOrders']);

    // 在请求完成后进行断言
    cy.get('@getUser').its('response.statusCode').should('eq', 200);
    cy.get('@getOrders').its('response.statusCode').should('eq', 200);
  });
});

在这个例子中，我们首先设置了两个 intercept 来分别监听 /api/users/* 和 /api/orders/* 的 GET 请求，并且给这两个请求分别设置了别名 getUser 和 getOrders。当点击按钮后，我们使用 cy.wait() 来等待这两个请求都完成。最后，我们还可以从 cy.get() 中获取这些请求的详细信息，并进行断言，以确保请求的执行符合预期。

通过这种方式，我们可以有效地管理和测试页面中并行发生的多个网络请求，确保它们都正确响应，并且符合我们的测试预期。