如何用Cypress拦截所有请求测试响应状态，解决无对应请求时测试失败问题

核心问题原因 #

原有写法使用cy.wait('@get')强制等待请求触发，如果当前用例没有对应类型的请求，就会触发超时直接报错；同时该写法只能校验第一个匹配到的同类型请求，存在多个同类型请求时会遗漏校验。

可用解决方案 #

方案一：动态判断请求数量后校验 #

直接获取拦截到的所有同类型请求，存在请求才执行校验逻辑，同时可覆盖所有同类型请求的校验：

// 拦截规则保持不变
beforeEach(() => {
    cy.intercept({method: 'GET', path: '*'}).as('get')
    cy.intercept({method: 'POST', path: '*'}).as('post')
})

// 修正后的afterEach逻辑（注意原拼写错误afterEcah需要改为afterEach）
afterEach(() => {
    // 校验所有GET请求
    cy.get('@get.all').then(getCalls => {
        if (getCalls.length) {
            getCalls.forEach(call => {
                expect(call.response.statusCode).to.be.oneOf([200, 304])
            })
        }
    })

    // 校验所有POST请求
    cy.get('@post.all').then(postCalls => {
        if (postCalls.length) {
            postCalls.forEach(call => {
                expect(call.response.statusCode).to.be.oneOf([200, 201, 304])
            })
        }
    })
})

方案二：新增用例标签灵活控制校验开关 #

如果部分用例明确不需要执行请求校验，可以给用例加自定义配置项，在afterEach中判断后跳过校验：

// 不需要校验请求的用例示例
it('静态页面无接口渲染测试', { skipRequestCheck: true }, () => {
    cy.visit('/about')
    cy.contains('关于我们').should('be.visible')
})

// 调整后的afterEach逻辑
afterEach(function() {
    // 命中跳过配置直接返回
    if (this.currentTest?.config?.skipRequestCheck) return

    // 写入方案一中的校验逻辑即可
})

注意事项 #

• 需确保用例执行时已经等待了必要的异步请求完成，避免校验逻辑提前执行拿不到response属性
• 如果需要拦截跨域请求，需要在intercept的匹配规则中新增origin: '*'参数

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