如何在 Cypress 中拦截和模拟网络请求？ - 面试题

在现代前端自动化测试中，Cypress 作为一款流行的端到端测试框架，其强大的网络请求拦截和模拟能力是提升测试可靠性和效率的关键。当测试应用涉及 API 调用时，真实网络请求可能受外部因素干扰（如网络延迟、服务器不可用），导致测试结果不稳定。通过拦截和模拟网络请求，开发者可以精确控制测试环境，验证组件在不同响应场景下的行为，从而确保应用的健壮性。本文将深入解析 Cypress 的 intercept 方法，提供从基础到高级的实用指南，帮助您构建更可靠的测试套件。

基本概念

Cypress 的 intercept 功能允许您在测试运行时动态拦截 HTTP/HTTPS 请求，模拟响应或修改请求内容。这基于 Cypress 拦截器（Interceptor）机制，它工作在测试执行的虚拟环境中，避免了浏览器的网络层依赖，确保测试隔离性。核心原理是：

拦截器注册：使用 cy.intercept() 在测试脚本中注册拦截规则。
请求处理：拦截器可以定义请求匹配规则（如 URL、方法、参数），并返回模拟响应。
测试控制：通过 cy.wait() 等方法等待特定拦截事件，验证请求行为。

关键优势包括：

隔离性：无需真实网络，避免外部依赖。
灵活性：模拟各种响应（成功、错误、延迟）。
可维护性：测试逻辑与实际 API 解耦。

注意：Cypress 拦截器仅影响测试运行时的请求，不影响浏览器实际行为。确保测试环境配置正确，避免与真实服务冲突。

实践步骤

1. 基础拦截与响应模拟

最简单的场景是拦截 GET 请求并返回固定响应。以下代码演示如何在测试中模拟一个 API 响应：

javascript
// 在测试文件中
it('模拟成功响应', () => {
  // 注册拦截器：匹配 '/api/data' 的 GET 请求
  cy.intercept('GET', '/api/data').as('get-data');
  
  // 触发请求（例如点击按钮）
  cy.get('.fetch-button').click();
  
  // 等待拦截事件完成
  cy.wait('@get-data').then((interception) => {
    // 验证响应状态和数据
    expect(interception.response.statusCode).to.equal(200);
    expect(interception.response.body.data).to.equal('mocked');
  });
});

参数说明：
- 'GET'：请求方法（可替换为 'POST'、'PUT' 等）。
- '/'api/data'：URL 模式（支持通配符，如 /api/*）。
- .as('get-data')：为拦截器命名，便于后续等待。
关键点：使用 .as() 命名是等待请求的关键，避免 cy.wait() 与未定义的拦截器混淆。

2. 模拟错误和延迟响应

在测试失败场景时，模拟错误响应（如 500 状态码）或延迟请求至关重要。例如：

javascript
// 模拟 500 错误
cy.intercept('GET', '/api/error').as('error-call');

// 模拟延迟 2000ms
cy.intercept('GET', '/api/delay').delay(2000);

// 验证错误响应
cy.get('.error-text').should('be.visible').and('contain', 'API failed');

高级用法：使用 respond() 方法自定义响应：

javascript
cy.intercept('GET', '/api/custom').respond({ status: 201, body: { success: true } });

注意事项：模拟错误时，确保测试逻辑捕获异常（如使用 try/catch 或断言）。

3. 处理动态请求和参数

当 API 依赖动态参数时，如查询字符串，使用通配符匹配：

javascript
// 匹配所有 /api/users 请求（含参数）
 cy.intercept('GET', '/api/users').as('users-fetch');
 
 // 模拟带参数的响应（例如 /api/users?filter=active）
 cy.intercept('GET', '/api/users').respond((req) => {
   return { status: 200, body: { data: req.query.filter } };
 });

最佳实践：
- 使用 req.url 获取原始 URL，解析参数。
- 为测试生成模拟数据（如 req.query）。
- 避免硬编码参数，提升测试可重用性。

4. 高级技巧：重定向和多请求链

在复杂场景中，如 API 重定向或链式请求，Cypress 提供 onRequest 和 onResponse 回调：

javascript
// 拦截并处理重定向
 cy.intercept('GET', '/api/redirect').as('redirect-call');
 cy.intercept('GET', '/api/redirect', (req) => {
   req.on('response', (res) => {
     if (res.statusCode === 301) {
       // 模拟重定向到新 URL
       req.continue(() => res.set('Location', '/api/redirected')); 
     }
   });
 });

关键建议：
- 优先使用 cy.intercept() 的链式调用（如 .as() + .wait()）。
- 对于大规模测试，结合 Cypress route API 管理多个拦截器。
- 避免在拦截器中修改请求体（可能破坏测试隔离）。

常见问题与解决方案

问题 1：拦截器未生效

原因：请求 URL 不匹配（如大小写敏感）或测试执行顺序错误。
解决方案：
- 使用通配符：'/api/*' 匹配所有子路径。
- 调试：添加 console.log(req.url) 确认请求。
- 参考 Cypress 官方文档。

问题 2：真实网络干扰测试

原因：测试环境未隔离，真实请求覆盖模拟。
解决方案：
- 在测试前调用 cy.visit() 时使用 networkStub 配置。
- 使用 Cypress.automation('network-stub') 停用浏览器网络（仅测试时）。
- 保持测试环境干净：每次测试后清除拦截器（cy.intercept().reset()）。

问题 3：响应延迟不准确

原因：delay() 未正确应用或浏览器缓存影响。
解决方案：
- 用 cy.intercept().as() 结合 cy.wait() 确保顺序。
- 对于复杂场景，使用 respond() 代替 delay()。
- 测试前禁用缓存：cy.visit('/test', { cache: false })。

结论

Cypress 的网络请求拦截和模拟功能是前端测试的宝贵工具，能显著提升测试覆盖率和稳定性。通过本文的步骤，您已掌握从基础到高级的实践技巧：从简单响应模拟到动态参数处理和错误场景验证。关键在于将拦截器整合到测试流程中——确保每个测试用例都定义明确的请求行为，并利用 cy.wait() 进行精准控制。建议在实际项目中遵循以下原则：

测试驱动开发：先设计测试场景，再实现拦截逻辑。
版本控制：将拦截器配置纳入测试脚本，便于回溯。
持续集成：在 CI/CD 管道中启用拦截器，防止真实网络干扰。

最终建议：Cypress 拦截器不是替代真实 API 的工具，而是补充测试的利器。始终结合手动测试验证关键路径，并参考 Cypress 官方指南深入学习。掌握这些技术后，您将能构建出更健壮、可维护的前端测试体系。

附录：实用代码片段

模拟带身份验证的请求

javascript
cy.intercept('GET', '/api/secure').as('secure-call');
cy.request('/api/secure', { headers: { 'Authorization': 'Bearer token' } });
cy.wait('@secure-call').then(interception => {
  expect(interception.response.body).to.have.property('user');
});

全局拦截器配置（在 cypress/support/index.js）

javascript
// 自动处理所有 API 请求
Cypress.on('window:load', () => {
  cy.intercept('GET', '/api/*').as('api');
});

避免常见陷阱：
- 不要在测试中滥用 cy.intercept()；仅用于测试场景。
- 为每个拦截器命名，避免冲突。
- 使用 cy.log('Request: ', req.url) 调试。

图：Cypress 测试中网络请求拦截的可视化示例（来源：Cypress 官方文档）