如何在Cypress测试套件(describe)中仅配置一次intercept而非每个测试用例？

问题核心原因 #

即使关闭testIsolation，Cypress默认仍会在每个it()执行后清除intercept存根——这是因为拦截器的生命周期绑定逻辑独立于浏览器上下文，仅关闭上下文隔离不足以保留拦截器。

可行解决方案 #

方案1：before()钩子搭配preserve: true配置 #

在describe块的before()钩子中定义intercept时，添加preserve: true参数，强制Cypress在测试用例间保留该拦截器：

describe('订单流程E2E场景', () => {
  before(() => {
    // 配置需要全局保留的拦截器，添加preserve: true
    cy.intercept({
      method: 'GET',
      url: '/api/user/info',
      preserve: true // 关键配置，确保拦截器不被清除
    }, { fixture: 'user-info.json' }).as('getUserInfo');

    cy.intercept('POST', '/api/order/create', { statusCode: 201, body: { orderId: '12345' }, preserve: true }).as('createOrder');
  });

  it('验证用户信息加载', () => {
    cy.visit('/order');
    cy.wait('@getUserInfo');
    cy.get('.user-name').should('contain', '张三');
  });

  it('验证订单创建成功', () => {
    cy.get('.create-order-btn').click();
    cy.wait('@createOrder');
    cy.get('.order-id').should('contain', '12345');
  });
});

方案2：封装全局命令复用拦截器配置 #

如果多个测试场景需要相同的拦截器，可在cypress/support/e2e.js中注册全局命令，再在目标describe的before()中调用：

// cypress/support/e2e.js
Cypress.Commands.add('setupGlobalIntercepts', () => {
  cy.intercept('GET', '/api/common/config', { fixture: 'global-config.json', preserve: true }).as('getGlobalConfig');
  cy.intercept('PUT', '/api/user/update', { statusCode: 200, preserve: true }).as('updateUser');
});

// 测试文件中的describe
describe('个人中心E2E场景', () => {
  before(() => {
    cy.setupGlobalIntercepts();
    cy.visit('/profile');
  });

  it('验证全局配置加载', () => {
    cy.wait('@getGlobalConfig');
    cy.get('.theme-switch').should('exist');
  });

  it('验证用户信息修改', () => {
    cy.get('.edit-name').type('李四');
    cy.get('.save-btn').click();
    cy.wait('@updateUser');
    cy.get('.user-name').should('contain', '李四');
  });
});

方案3：配合实验性配置全局生效（可选） #

在cypress.config.js中开启experimentalInteractiveRunEvents，结合before:spec事件设置全局拦截器（适合所有测试文件通用的接口）：

// cypress.config.js
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    testIsolation: false,
    experimentalInteractiveRunEvents: true,
    setupNodeEvents(on, config) {
      on('before:spec', () => {
        // 结合浏览器端的before钩子，搭配preserve: true实现全局拦截
        Cypress.on('window:before:load', (win) => {
          cy.intercept('GET', '/api/global/notice', { fixture: 'notice.json', preserve: true }).as('getNotice');
        });
      });
    },
  },
});

注意事项 #

• 必须确保testIsolation已设为false，否则浏览器上下文重置会导致拦截器失效
• 若单个测试用例需要临时修改拦截逻辑，可在该it()内部重新定义——新拦截器会覆盖旧的，且仅对当前用例生效
• 避免过度依赖全局拦截器，防止测试用例间耦合，影响测试独立性

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