如何在单个Cypress测试文件中配置多个cy.intercept拦截器？

你的问题出在拦截器注册时机不对：beforeEach里的拦截器会在每个测试用例执行前先注册，接着执行cy.visit触发API请求；而第二个测试用例里的错误拦截器是在visit之后才添加的，这时候API请求已经被beforeEach里的拦截器处理了，新的拦截器根本不会生效。

下面是两种推荐的解决流程：

方案一：每个用例独立配置拦截+访问页面 #

这是最直观且易维护的方式，每个测试用例单独配置所需的拦截器，确保拦截在页面访问前完成：

describe('Display Data Page', () => {

  it('Should display a list of my data', () => {
    // 先注册成功响应的拦截器
    cy.intercept('GET', 'https://localhost:3000/GetData', { fixture: 'my_data.json' }).as('my_data');
    // 再访问页面触发API请求
    cy.visit('/display-data');
    
    cy.wait('@my_data');
    cy.get('.dataGrid').should('not.be.empty');
    cy.get('.dataGrid').should('contain', 'Blah');
  });

  it('Should display a error message when api is offline', () => {
    // 先注册错误响应的拦截器
    cy.intercept('GET', 'https://localhost:3000/GetData', { status: 400 }).as('my_error_data');
    // 再访问页面触发API请求
    cy.visit('/display-data');
    
    cy.wait('@my_error_data');
    cy.get('.errorMessage').should('not.be.empty');
    cy.get('.errorMessage').should('contain', 'Error: API is non-responsive!');
  });

});

方案二：在beforeEach中动态切换拦截配置 #

如果想复用页面访问逻辑，可以在beforeEach里根据当前测试用例的信息动态配置拦截器（注意使用普通函数而非箭头函数，才能访问this.currentTest）：

describe('Display Data Page', function() {

  beforeEach(function() {
    let interceptOptions;
    // 根据测试标题判断配置哪种拦截规则
    if (this.currentTest.title.includes('error message')) {
      interceptOptions = { status: 400 };
    } else {
      interceptOptions = { fixture: 'my_data.json' };
    }
    
    cy.intercept('GET', 'https://localhost:3000/GetData', interceptOptions).as('dataRequest');
    cy.visit('/display-data');
  });

  it('Should display a list of my data', () => {
    cy.wait('@dataRequest');
    cy.get('.dataGrid').should('not.be.empty');
    cy.get('.dataGrid').should('contain', 'Blah');
  });

  it('Should display a error message when api is offline', () => {
    cy.wait('@dataRequest');
    cy.get('.errorMessage').should('not.be.empty');
    cy.get('.errorMessage').should('contain', 'Error: API is non-responsive!');
  });

});

是否需要拆分到不同文件？ #

完全不需要拆分，同一测试文件就能完美处理这两个场景。核心原则是：拦截器必须在触发API请求的动作（比如cy.visit）之前注册，否则会错过请求的捕获。

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