Cypress 如何等待 XHR 请求

在使用 Cypress 进行前端自动化测试时，等待和验证 XHR（XMLHttpRequest）请求是一个常见的需求。Cypress 提供了几种方法来处理网络请求，其中最常用的是通过 cy.intercept() 方法来拦截和管理 AJAX 请求。下面我会详细说明如何使用这个方法来等待 XHR 请求，并且给出一个具体的例子。

步骤1: 拦截请求

在测试中，您首先需要拦截感兴趣的 XHR 请求。cy.intercept() 方法允许您监听和操作网络请求和响应。您可以指定请求的方法和 URL，然后 Cypress 会在发出这样的请求时进行拦截。

javascript
// 拦截GET请求
cy.intercept('GET', 'https://example.com/api/data').as('getData');

步骤2: 触发请求

接下来，您需要在应用中触发这个请求。这通常是通过模拟用户的交互操作来完成的，例如点击按钮或提交表单。

javascript
// 触发XHR请求的操作，比如点击一个加载按钮
cy.get('button.load').click();

步骤3: 等待请求完成

一旦请求被触发，您可以使用 cy.wait() 方法来等待这个请求完成。您可以引用在 cy.intercept() 中定义的别名来等待特定的请求。

javascript
// 等待请求完成
cy.wait('@getData').its('response.statusCode').should('eq', 200);

这里，cy.wait('@getData') 会暂停测试的执行，直到名为 'getData' 的请求完成。您可以进一步检查响应，如上例所示，确认响应状态码是否为 200。

示例

假设您正在测试一个用户信息页面，该页面在用户点击“加载用户信息”按钮后，会从 https://example.com/api/users 获取数据。测试脚本可能如下所示：

javascript
describe('用户信息页面', () => {
  it('应该加载并显示用户信息', () => {
    // 访问用户信息页面
    cy.visit('/user-info');

    // 拦截API请求
    cy.intercept('GET', 'https://example.com/api/users').as('loadUser');

    // 模拟用户点击操作
    cy.get('button#load-user-info').click();

    // 等待XHR请求完成
    cy.wait('@loadUser').then((interception) => {
      expect(interception.response.statusCode).to.eq(200);
      expect(interception.response.body).to.have.property('name');
    });

    // 验证页面上的信息
    cy.get('#user-name').should('contain', 'John Doe');
  });
});

这个例子展示了如何在 Cypress 中等待和验证 XHR 请求。通过拦截请求、触发请求和等待请求完成这三个步骤，可以确保您的测试覆盖了网络交互的各个方面。