Cypress 如何在测试中等待接口成功响应

在使用 Cypress 进行自动化测试时，确保应用能够正确地等待并处理接口响应是非常重要的。Cypress 提供了几种不同的方式来处理接口请求和响应，确保测试的稳定性和可靠性。

使用 cy.wait() 等待特定的接口调用

Cypress 允许我们使用 cy.intercept() 来拦截应用中的 HTTP 请求，并通过 cy.wait() 方法来等待这个请求的响应。这是一个非常有效的方法来确保接口调用完成并取得预期的响应。

例子：

假设我们有一个用户登录的功能，当用户提交登录表单后，前端会发送一个 POST 请求到 /login。我们可以这样编写测试代码：

javascript
describe('登录功能测试', () => {
  it('成功登录', () => {
    // 拦截登录请求
    cy.intercept('POST', '/login').as('loginRequest');

    // 填充登录表单并提交
    cy.visit('/login');
    cy.get('input[name=username]').type('user');
    cy.get('input[name=password]').type('password');
    cy.get('form').submit();

    // 等待登录请求成功
    cy.wait('@loginRequest').its('response.statusCode').should('eq', 200);

    // 检查是否跳转到了主页
    cy.url().should('include', '/home');
  });
});

在这个例子中，我们首先使用 cy.intercept() 拦截了 POST 请求到 /login 的接口，并通过 .as() 方法给这个拦截命名为 loginRequest。提交表单后，我们通过 cy.wait('@loginRequest') 等待这个请求完成，并进一步检查响应状态码是否为 200，确保登录成功。

使用 cy.request() 直接发送请求

除了拦截前端发起的请求外，Cypress 还提供了 cy.request() 方法，允许我们直接从测试中发送 HTTP 请求。这可以用来确保在进行 UI 测试之前，后端的接口是可用的。

例子：

javascript
describe('直接通过 API 测试登录功能', () => {
  it('通过 API 请求登录', () => {
    cy.request({
      method: 'POST',
      url: '/login',
      body: { username: 'user', password: 'password' }
    }).then((response) => {
      expect(response.status).to.eq(200);
      expect(response.body).to.have.property('token');
    });
  });
});

在这个例子中，我们没有通过 UI 元素操作来触发请求，而是直接使用 cy.request() 发送了一个登录请求，并检查返回的状态码和响应体。

总结

使用 Cypress 进行接口测试时，cy.intercept() 和 cy.wait() 是组合起来等待和验证 HTTP 请求的强大工具。此外，cy.request() 提供了一个更直接的方式来测试后端接口。这些方法可以帮助我们确保在测试中接口能够正确响应，从而提高测试的准确性和可靠性。