Cypress中cy.intercept无法拦截cy.request请求的原因排查

问题场景 #

使用Cypress 11.2.0，在cypress/support/e2e.js中通过beforeEach全局配置了拦截所有请求的cy.intercept，该拦截器能正常捕获cy.visit发起的浏览器请求，但无法拦截cy.request发起的请求。相关代码如下：

全局拦截配置：

// cypress/support/e2e.js
beforeEach(() => {
  cy.intercept('*', req => {
    console.log(req.url, req)
  })
})

测试代码：

// 测试文件
beforeEach(() => {
  cy.visit('/some-page') // 此请求可被正常拦截
})

it('check links', () => {
  cy.get("a").each(a => {
    cy.request(a.prop('href')) // 此请求无法被拦截
  })
})

原因分析 #

cy.intercept的作用范围是浏览器环境下发起的请求——比如cy.visit、页面内的AJAX请求、点击元素触发的请求等，这些请求都是通过Cypress控制的浏览器实例发出的，所以能被拦截。

而cy.request是直接从Cypress的Node.js运行环境发起的HTTP请求，完全绕过了浏览器，自然不会被基于浏览器请求的cy.intercept捕获。

解决方法 #

方案1：无需拦截，直接验证请求状态 #

如果需求是检查链接是否可访问，不需要拦截请求，直接通过cy.request的响应断言即可：

it('check links', () => {
  cy.get("a").each(a => {
    cy.request(a.prop('href'))
      .its('status')
      .should('eq', 200) // 断言请求成功
  })
})

方案2：拦截Node层请求（需额外工具） #

如果必须拦截cy.request的请求，需要使用Node层的HTTP拦截工具，比如nock库：

1. 安装nock：npm install nock --save-dev
2. 在测试文件中引入并使用：

const nock = require('nock')

it('check links with intercept', () => {
  cy.get("a").each(a => {
    const url = a.prop('href')
    // 用nock拦截该URL的请求
    nock(new URL(url).origin)
      .get(new URL(url).pathname)
      .reply(200, 'Mocked response')

    cy.request(url)
      .its('body')
      .should('eq', 'Mocked response') // 验证拦截生效
  })
})

方案3：改用浏览器端请求 #

如果场景允许，也可以改用浏览器发起请求的方式（比如点击链接），这样就能被cy.intercept捕获：

it('check links via browser', () => {
  cy.get("a").each(a => {
    const url = a.prop('href')
    // 拦截该URL的浏览器请求
    cy.intercept(url).as('linkRequest')
    
    cy.wrap(a).click()
    cy.wait('@linkRequest').then(interception => {
      console.log(interception) // 可正常获取拦截到的请求
      // 进行断言
    })
  })
})

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