如何在Cypress测试中故意制造网络请求失败以模拟断网场景

我们为应用新增了离线连续性功能，需要构造API请求无返回的测试场景。由于测试用例总量较大，等待API真实断开连接的方式不具备实操性，因此需要寻找模拟网络断连的可行方法。目前编写了如下代码尝试实现该需求，但运行后未达到预期效果，请问该如何正确在Cypress测试中模拟断网、故意触发网络请求失败？

cy.intercept({
  'GET',
  '**/api/**/*'
}, (req) => {
  throw 'Network failure'
})
.as('failed')

cy.visit('/')

cy.wait('@failed')

cy.get('[data-cy="Error message"]')
  .should('be.visible')

原写法不生效的核心原因：在cy.intercept的请求处理回调中直接抛出异常，只会中断Cypress内部的拦截执行流程，不会向前端应用传递请求失败的状态，前端侧的请求监听逻辑完全收不到失败信号，自然无法触发预期的错误提示。

根据需要模拟的不同失败场景，选择对应写法即可：

• 模拟纯断网、请求直接中断无任何响应：这是最贴合需求的场景，使用req.destroy()方法直接终止请求，和真实断网下请求的表现完全一致

cy.intercept('GET', '**/api/**/*', (req) => {
  req.destroy()
}).as('failedRequest')

cy.visit('/')
cy.wait('@failedRequest')
cy.get('[data-cy="Error message"]').should('be.visible')

• 模拟服务端返回错误状态码：如果测试场景不是完全断网，而是接口返回4xx/5xx类错误，可以用req.reply()构造错误响应

// 示例：模拟500服务端内部错误
cy.intercept('GET', '**/api/**/*', {
  statusCode: 500,
  body: 'Internal Server Error'
}).as('serverError')

• 全局模拟浏览器离线状态：如果需要测试整个应用的全局离线逻辑（所有请求都无法发出），可以直接调用Chrome调试协议模拟网络断开，测试完成后记得恢复网络

// 开启离线模式
cy.wrap(Cypress.automation('remote:debugger:protocol', {
  command: 'Network.emulateNetworkConditions',
  params: {
    offline: true,
    latency: -1,
    downloadThroughput: -1,
    uploadThroughput: -1
  }
}))

// 测试逻辑执行完成后恢复网络
cy.wrap(Cypress.automation('remote:debugger:protocol', {
  command: 'Network.emulateNetworkConditions',
  params: {
    offline: false,
    latency: 0,
    downloadThroughput: -1,
    uploadThroughput: -1
  }
}))

• 不要在cy.intercept回调中用throw抛出异常模拟错误，该操作不会作用到前端的请求上下文
• 使用req.destroy()时要确认拦截规则的路径、请求方法配置正确，否则会出现cy.wait超时的问题
• 若测试的是跨域接口，需要确认Cypress配置中没有将对应接口加入拦截白名单，避免拦截规则不生效

内容的提问来源于stack exchange，提问作者user19519014