Cypress 中模拟请求错误与UI反馈测试指南-js教程-PHP中文网

Cypress 中模拟请求错误与UI反馈测试指南

本教程详细介绍了在 cypress 中如何模拟网络请求错误，特别是针对表单提交后服务器返回异常响应的场景。文章将深入探讨 `cy.intercept` 的正确使用时机和方法，包括模拟服务器响应错误（stubbing responses）和修改客户端发送请求数据（modifying outgoing requests）两种策略。通过具体代码示例和最佳实践，帮助开发者有效地测试应用程序在面对网络异常时的用户界面反馈和健壮性。

在前端应用程序开发中，测试其对网络请求错误的健壮性至关重要。Cypress 提供了强大的 cy.intercept 命令，允许开发者模拟各种网络场景，包括服务器返回错误响应或客户端发送不完整数据。本文将详细阐述如何在 Cypress 中正确地实现这些测试场景，并断言用户界面的相应反馈。

1. 理解 Cypress cy.intercept 的工作机制与时机

cy.intercept 的核心作用是在浏览器发出网络请求之前对其进行拦截。这意味着，如果你希望拦截一个特定的请求，cy.intercept 必须在该请求被触发之前设置。如果 cy.intercept 在请求已经发出之后才被定义，那么它将无法捕获到那个请求。

常见错误示例： 原始问题中，cy.intercept 被放在了 cy.get("#save-button").click() 之后。这意味着当用户点击保存按钮时，实际的网络请求已经发出，而 cy.intercept 此时才被定义，因此无法拦截到这个已发出的请求。

// 错误示例：intercept 在请求发出后设置
cy.get("#name").type("John Doe");
cy.get("#age").type("25");
cy.get("#location").type("North Pole");
cy.get("#save-button").click(); // 请求已发出
cy.intercept("GET", "**/create-users/**", { // 此时设置已晚
    statusCode: 400,
    body: { /* ... */ },
}).as("newUser");
cy.wait("@newUser"); // 可能会超时或等待到后续无关请求

登录后复制

正确设置时机：cy.intercept 必须在触发请求的动作（如点击提交按钮）之前定义。

2. 模拟服务器响应错误 (Stubbing Responses)

这是最常见的模拟错误场景，即模拟服务器返回一个非成功的 HTTP 状态码（如 400 Bad Request, 500 Internal Server Error）和特定的错误响应体。

场景： 模拟用户提交表单后，服务器因数据验证失败而返回 400 状态码，并附带一个空或错误的响应体。

实现步骤：

定义拦截规则： 在触发请求的动作之前，使用 cy.intercept 定义拦截规则。指定请求方法、URL 模式，并设置 statusCode 和 body 来模拟服务器的错误响应。
执行触发动作： 填充表单并点击提交按钮，触发网络请求。
等待拦截完成： 使用 cy.wait('@alias') 等待被拦截的请求完成。cy.wait 会返回一个 interception 对象，其中包含 request 和 response 属性，可以用于进一步的检查。
断言 UI 状态： 最重要的是，断言用户界面是否正确地显示了错误信息，而不是直接断言 interception 对象上的 error 属性，因为在模拟响应时，interception.response 通常会直接包含你设置的 statusCode 和 body。

示例代码：

describe('表单提交错误处理', () => {
  it('应在服务器返回400错误时显示错误消息', () => {
    // 1. 定义拦截规则：在请求发出前设置
    cy.intercept("POST", "**/create-users/**", { // 注意：通常表单提交是POST请求
      statusCode: 400,
      body: {
        message: "提交数据无效，请检查输入。",
        errors: {
          name: "姓名不能为空",
          age: "年龄必须是数字"
        }
      },
    }).as("createUserError");

    // 2. 填充表单并点击提交按钮
    cy.visit("/create-user-form"); // 假设这是表单页面
    cy.get("#name").type("John Doe");
    cy.get("#age").type("25");
    cy.get("#location").type("North Pole");
    cy.get("#save-button").click();

    // 3. 等待拦截完成
    cy.wait("@createUserError").then((interception) => {
      // 可选：检查拦截到的请求和响应细节
      expect(interception.request.body).to.have.property('name', 'John Doe');
      expect(interception.response.statusCode).to.eq(400);
      expect(interception.response.body).to.have.property('message', '提交数据无效，请检查输入。');
    });

    // 4. 断言 UI 状态：检查页面上是否显示了错误消息
    cy.get(".error-message").should("be.visible").and("contain", "提交数据无效");
    cy.get("#name-error").should("contain", "姓名不能为空");
    // 确保 UI 上没有显示成功创建的提示
    cy.get(".success-message").should("not.exist");
  });
});

登录后复制

注意事项：

挖错网

一款支持文本、图片、视频纠错和AIGC检测的内容审核校对平台。

查看详情

请求方法： 表单提交通常是 POST 请求，而不是 GET。请根据实际应用调整 cy.intercept 中的请求方法。
cy.wait 的 yielded object： cy.wait('@alias') 返回的 interception 对象包含 id, request 和 response 属性。你可以通过 interception.request.body 检查客户端发送的请求体，通过 interception.response.statusCode 和 interception.response.body 检查模拟的响应。
断言重点： 你的测试目标是验证应用程序在收到错误响应时的行为，因此重点应放在检查用户界面上的错误提示、表单字段的验证消息等。

3. 模拟发送不良请求 (Modifying Outgoing Requests)

有时，你可能需要测试客户端发送的数据本身就有问题的情况，例如，在提交前动态修改请求体，使其包含空值或非法格式，以模拟客户端逻辑错误或恶意输入。这种情况下，你希望请求仍然发送到服务器（或模拟的服务器），但请求体已经被修改。

场景： 模拟客户端在发送请求前，意外地将某些关键字段设置为空。

实现方法： 使用 cy.intercept 的回调函数形式，并在回调中访问 req 对象来修改请求。然后调用 req.continue() 让修改后的请求继续发送。

示例代码：

describe('模拟发送空数据请求', () => {
  it('应在发送空数据时触发服务器错误并显示UI反馈', () => {
    // 1. 定义拦截规则：修改请求体
    cy.intercept("POST", "**/create-users/**", (req) => {
      // 假设我们想模拟name和age字段为空的情况
      req.body.name = '';
      req.body.age = '';
      // 让修改后的请求继续发送
      req.continue();
    }).as("modifiedRequest");

    // 2. 正常填充表单并点击提交（但请求体会被上述拦截器修改）
    cy.visit("/create-user-form");
    cy.get("#name").type("Valid Name"); // 这些输入会被拦截器覆盖
    cy.get("#age").type("30");
    cy.get("#location").type("Somewhere");
    cy.get("#save-button").click();

    // 3. 等待请求完成
    cy.wait("@modifiedRequest").then((interception) => {
      // 验证请求体已被修改
      expect(interception.request.body).to.have.property('name', '');
      expect(interception.request.body).to.have.property('age', '');
      // 如果后端真的返回了400，这里可以检查响应
      // expect(interception.response.statusCode).to.eq(400);
    });

    // 4. 断言 UI 状态：假设后端会返回错误，并且前端会显示错误
    cy.get(".error-message").should("be.visible").and("contain", "数据验证失败");
  });
});

登录后复制

适用场景： 这种方法适用于你想测试客户端发送了“坏”数据后，后端如何响应，以及前端如何处理后端返回的错误。它更侧重于模拟客户端数据构造的缺陷，而不是简单地模拟服务器的响应。

4. 断言错误状态与用户界面反馈

无论你选择哪种模拟策略，最终目标都是验证用户界面是否正确地响应了错误。这意味着你的断言应该集中在：

错误消息的显示： 检查特定的错误消息元素是否可见，并且其文本内容是否正确。
```
cy.get('.alert.alert-danger').should('be.visible').and('contain', '提交失败');
```
登录后复制
表单字段的验证提示： 如果错误与特定表单字段相关，检查该字段旁边的验证提示。
```
cy.get('#name-field .validation-error').should('contain', '姓名不能为空');
```
登录后复制
UI 元素的禁用/启用： 在错误发生后，某些按钮或输入框可能需要被禁用。
```
cy.get('#submit-button').should('be.disabled');
```
登录后复制
成功状态的缺失： 确保在错误发生时，不显示任何成功的提示或状态。
```
cy.get('.success-message').should('not.exist');
```
登录后复制

总结

在 Cypress 中模拟网络请求错误是测试应用程序健壮性的关键部分。掌握 cy.intercept 的正确使用时机和两种主要策略——模拟服务器响应（Stubbing Responses）和修改发送请求（Modifying Outgoing Requests）——能让你有效地覆盖各种错误场景。核心在于：

时机： 始终在触发请求的动作之前设置 cy.intercept。
策略选择：
- 模拟响应： 当你想测试服务器返回特定错误响应时，使用 statusCode 和 body 直接定义响应。
- 修改请求： 当你想测试客户端发送的数据本身有问题，并观察后端如何处理时，使用 req.continue() 修改请求体。
断言重点： 你的测试应聚焦于用户界面如何响应这些错误，而不是过度关注 interception 对象的内部细节（除非你需要验证请求或响应的特定属性）。

通过这些方法，你可以构建出全面且可靠的端到端测试，确保你的应用程序在面对网络异常时依然能提供良好的用户体验。

以上就是Cypress 中模拟请求错误与UI反馈测试指南的详细内容，更多请关注php中文网其它相关文章！