Cypress中拦截与模拟请求：测试表单提交错误场景的策略

本文详细介绍了如何在cypress测试中利用`cy.intercept`命令模拟表单提交后的错误响应或修改发送的请求数据。通过设置特定的http状态码和响应体，或在请求发出前修改其内容，可以有效地测试应用程序在异常情况下的行为，确保用户界面能正确处理错误反馈，从而提高测试覆盖率和应用的健壮性。

引言：Cypress中模拟请求的必要性

在前端开发和测试中，验证应用程序如何优雅地处理后端错误或异常数据输入是至关重要的一环。特别是在表单提交场景中，我们需要确保当服务器返回错误、或当客户端发送了不完整/无效的数据时，用户界面能够正确地显示错误信息、保持表单状态或阻止不正确的操作。Cypress的cy.intercept命令为我们提供了强大的能力，可以在不依赖真实后端服务的情况下，模拟这些边缘情况，从而实现更稳定、更全面的端到端测试。

理解 cy.intercept 的基本用法

cy.intercept 是Cypress中用于网络请求拦截的核心命令。它允许你监听、修改甚至完全替换浏览器发出的HTTP请求和接收到的响应。其基本语法为：

cy.intercept(method, url, handler);

• method: HTTP请求方法，如 'GET', 'POST', 'PUT', 'DELETE' 等。
• url: 匹配请求的URL模式，可以是字符串或正则表达式。
• handler: 可以是一个对象（用于直接模拟响应），也可以是一个函数（用于动态修改请求或响应）。

关键点： cy.intercept 必须在触发目标网络请求的动作（例如点击提交按钮）之前定义。如果拦截器在请求发出后才定义，它将无法捕获到该请求。

策略一：模拟错误响应（Stubbing Responses）

此策略适用于测试当后端服务因各种原因（如数据校验失败、服务器内部错误等）返回错误响应时，前端界面的表现。

场景描述

假设我们有一个用户创建表单。在用户填写并提交表单后，如果服务器发现提交的数据不符合业务规则（例如，某个必填字段为空），它会返回一个400 Bad Request状态码，并可能在响应体中包含具体的错误信息。我们的测试目标是验证前端是否能捕获到这个400错误，并向用户显示相应的提示。

实现步骤

1. 定义拦截器： 在执行表单提交动作之前，使用 cy.intercept 针对预期的创建用户请求（通常是 POST 方法）设置一个模拟响应。我们将 statusCode 设置为400，并在 body 中包含模拟的错误信息。
2. 执行用户操作： 填充表单字段并点击提交按钮。
3. 等待拦截完成： 使用 cy.wait 等待之前定义的拦截器捕获到请求并返回模拟响应。
4. 断言UI状态： 这是最重要的一步。在收到模拟错误响应后，检查用户界面是否显示了预期的错误消息，或者表单数据是否未被清除（表示创建失败）。

代码示例

describe('用户创建表单错误处理', () => {
  beforeEach(() => {
    cy.visit('/create-user'); // 访问包含表单的页面
  });

  it('应该在服务器返回400错误时显示错误信息', () => {
    // 1. 定义拦截器：模拟一个POST请求到/api/create-users返回400错误
    cy.intercept("POST", "**/api/create-users", {
      statusCode: 400,
      body: {
        message: "提交数据无效",
        errors: {
          name: "姓名不能为空",
          age: "年龄必须是数字"
        }
      },
    }).as("createUserError"); // 给拦截器起一个别名

    // 2. 执行用户操作：填充表单并点击提交
    cy.get("#name").type("John Doe");
    cy.get("#age").type("abc"); // 故意输入错误年龄
    cy.get("#location").type("North Pole");
    cy.get("#save-button").click();

    // 3. 等待拦截完成
    cy.wait("@createUserError").then((interception) => {
      // 可以在这里检查拦截到的请求和响应的详细信息
      // console.log("拦截到的请求体:", interception.request.body);
      // console.log("模拟的响应体:", interception.response.body);
    });

    // 4. 断言UI状态：检查页面上是否显示了错误信息
    cy.get(".error-message").should("be.visible").and("contain", "提交数据无效");
    cy.get(".name-error").should("not.exist"); // 姓名输入正确，不应有错误
    cy.get(".age-error").should("be.visible").and("contain", "年龄必须是数字");
    cy.get("#name").should("have.value", "John Doe"); // 表单数据应保留
  });
});

注意事项

• HTTP方法： 确保 cy.intercept 中指定的HTTP方法（例如 POST）与应用程序实际发出的请求方法一致。
• 断言目标： 重点是断言用户界面的行为（例如，错误消息的显示、表单字段的状态），而不是仅仅检查 cy.wait 返回的 interception 对象的属性。尽管 interception 对象提供了丰富的调试信息，但最终用户与UI交互。
• 真实响应结构： 在实际应用中，成功创建资源的响应通常只包含新创建资源的ID，而不是完整的表单数据。在模拟错误响应时，可以根据实际后端API的错误响应结构来构造 body。

策略二：修改发出的请求（Controlling Outbound Requests）

此策略适用于测试当客户端在发送请求之前，需要修改或验证请求体中的数据，以模拟某些特定的输入条件。

场景描述

有时，我们可能希望在表单提交后，但在请求真正发送到服务器之前，修改请求体中的数据。例如，模拟用户提交了一个空姓名，即使他们在UI上输入了内容，但在网络层面上我们将其置空，以测试后端和前端对这种“坏数据”的处理。

独响

一个轻笔记+角色扮演的app

下载

实现步骤

1. 定义带回调函数的拦截器： 使用 cy.intercept 并传入一个回调函数作为 handler。这个回调函数会接收一个 req 对象，代表即将发出的请求。
2. 修改请求体： 在回调函数中，直接修改 req.body 属性。
3. 继续请求： 调用 req.continue() 允许修改后的请求继续发送。如果没有调用 req.continue()，请求将会被挂起。
4. 执行用户操作： 填充表单并点击提交按钮。
5. 等待拦截完成： 使用 cy.wait 等待拦截完成。
6. 断言UI状态： 检查UI是否根据修改后的请求数据产生了预期的错误反馈。

代码示例

describe('修改请求体以模拟无效数据', () => {
  beforeEach(() => {
    cy.visit('/create-user');
  });

  it('应该在请求体被修改为空姓名时显示姓名错误', () => {
    // 1. 定义带回调函数的拦截器：在请求发出前将姓名置空
    cy.intercept("POST", "**/api/create-users", (req) => {
      // 模拟将name字段置空，无论UI上输入了什么
      req.body.name = "";
      // 允许请求继续发送到服务器（或下一个拦截器）
      req.continue();
    }).as("modifyCreateUserRequest");

    // 2. 执行用户操作：填充表单（即使输入了姓名）并点击提交
    cy.get("#name").type("Valid Name"); // 用户在UI上输入了姓名
    cy.get("#age").type("25");
    cy.get("#location").type("Somewhere");
    cy.get("#save-button").click();

    // 3. 等待拦截完成
    cy.wait("@modifyCreateUserRequest").then((interception) => {
      // 验证请求体是否已被修改
      expect(interception.request.body.name).to.equal("");
    });

    // 4. 断言UI状态：检查UI上因姓名为空而产生的错误
    cy.get(".name-error").should("be.visible").and("contain", "姓名不能为空");
    cy.get("#name").should("have.value", "Valid Name"); // UI上的值可能不变，但后端收到的是空
  });
});

注意事项

• req.continue()： 这是使用回调函数拦截器时非常重要的一步。如果忘记调用，请求将永远不会完成。
• 服务器响应： 使用此策略时，请求会带着修改后的数据发送到服务器（如果未模拟服务器响应）。因此，需要确保后端能够正确处理这些“坏数据”并返回相应的错误。如果也想模拟服务器响应，可以在 req.continue() 之后再定义一个 cy.intercept 来处理响应，或者在回调函数中直接返回一个模拟响应对象。

cy.wait 返回的 interception 对象详解

当使用 cy.wait('@alias') 等待一个拦截器完成时，它会返回一个 interception 对象，该对象包含了关于被拦截请求和响应的丰富信息，对于调试和更深层次的断言非常有用。

interception 对象主要包含以下属性：

• id: 拦截器的唯一ID。
• request: 包含请求的详细信息，例如：
  • method: 请求方法 (e.g., 'POST')
  • url: 请求URL
  • headers: 请求头
  • body: 请求体（如果存在）
• response: 包含响应的详细信息，例如：
  • statusCode: 响应状态码
  • headers: 响应头
  • body: 响应体（如果存在）

你可以通过 .then() 链式调用来访问这些属性：

cy.wait('@newUser').then((interception) => {
  // 打印请求体
  console.log('发送的请求体:', interception.request.body);
  // 打印模拟的响应状态码
  console.log('收到的响应状态码:', interception.response.statusCode);
  // 验证响应体中的特定属性
  expect(interception.response.body).to.have.property('message', '提交数据无效');
});

总结

Cypress的cy.intercept命令是进行健壮的端到端测试不可或缺的工具。通过灵活运用模拟错误响应和修改发出请求这两种策略，我们可以：

• 全面测试错误路径： 确保应用程序在遇到各种后端错误或无效输入时，能够提供清晰的用户反馈。
• 提高测试稳定性： 减少对真实后端服务的依赖，使测试更加独立和可重复。
• 加速开发流程： 即使后端API尚未完全实现，前端开发人员也能通过模拟响应进行开发和测试。

在编写测试时，请始终记住将 cy.intercept 放置在触发网络请求的动作之前，并优先断言用户界面的最终状态，因为这是用户实际体验到的结果。结合 cy.wait 提供的 interception 对象，你将能够构建出既强大又易于调试的Cypress测试套件。