如何通过Cypress识别系统真实错误？fixtures导致无报错求解

问题根源 #

你当前的测试用cy.intercept直接返回本地fixture，这会完全拦截请求、跳过真实后端调用——不管实际服务器返回500还是其他状态，测试都会使用fixture里的模拟响应（默认状态码200），自然不会捕捉到真实错误。

实现目标的处理流程 #

1. 测试真实后端状态（捕捉500错误） #

如果你需要验证真实后端的响应，移除拦截中的fixture配置，让请求透传到真实服务器，这样Cypress就能获取真实的响应状态：

修改后的测试代码：

it('Add less than 400 (314) characters to value added service', function (){
  // 移除fixture，让请求真实发送到后端
  cy.intercept("POST", "**/api/update_profile/overview").as('submitCompanyOverview');
  cy.intercept("POST", "**/api/login/select_supplier_role").as('selectSupplierRole');

  cy.fixture('supplier_profile_sample_characters_314.json')
    .then((data) => {
      cy.xpath('(//div[@class=\'v-input__slot\'])[5]')
        .type(data.description);
    });

  cy.xpath('//button[@class=\'md-button save-btn md-theme-default\']')
    .click();
  
  // 注意：真实后端返回500时，前端可能不会显示成功提示，这个断言会失败，符合预期
  cy.contains('Company Information Updated').should('be.visible');

  cy.wait('@submitCompanyOverview').then(({response}) => {
    // 真实后端返回500时，这个断言会抛出错误
    expect(response.statusCode).to.eq(200);
  });
  cy.wait('@selectSupplierRole').then(({response}) => {
    expect(response.statusCode).to.eq(200);
  });
});

此时如果后端返回500，cy.wait后的断言会失败，测试抛出错误；后端修复后返回200，测试正常通过。

2. 分场景测试（兼顾前端快速验证+真实后端检测） #

如果需要保留fixture用于快速测试前端交互，同时要能检测真实后端错误，可以通过环境变量切换拦截策略：

it('Add less than 400 (314) characters to value added service', function (){
  // 根据环境变量决定是否使用fixture
  const useFixture = !Cypress.env('TEST_REAL_BACKEND');
  
  cy.intercept("POST", "**/api/update_profile/overview", useFixture ? {
    fixture: "supplier_profile_company_overview.json",
  } : {}).as('submitCompanyOverview');

  cy.intercept("POST", "**/api/login/select_supplier_role", useFixture ? {
    fixture: "supplier_profile_submit_select_supplier_role.json",
  } : {}).as('selectSupplierRole');

  // 剩余测试代码不变
  cy.fixture('supplier_profile_sample_characters_314.json')
    .then((data) => {
      cy.xpath('(//div[@class=\'v-input__slot\'])[5]')
        .type(data.description);
    });

  cy.xpath('//button[@class=\'md-button save-btn md-theme-default\']')
    .click();
  cy.contains('Company Information Updated').should('be.visible');

  cy.wait('@submitCompanyOverview').then(({response}) => {
    expect(response.statusCode).to.eq(200);
  });
  cy.wait('@selectSupplierRole').then(({response}) => {
    expect(response.statusCode).to.eq(200);
  });
});

运行测试时，通过环境变量控制是否调用真实后端：

# 调用真实后端，检测真实错误
CYPRESS_TEST_REAL_BACKEND=true npx cypress run

# 使用fixture，快速测试前端
npx cypress run

3. 新增错误场景测试（模拟500情况） #

如果需要验证前端在后端500时的错误处理逻辑，可以单独新增测试用例，模拟500响应：

it('Show error message when profile update fails with 500', function (){
  // 模拟服务器返回500错误
  cy.intercept("POST", "**/api/update_profile/overview", {
    statusCode: 500,
    body: { message: "Server error occurred" }
  }).as('submitCompanyOverview');

  cy.fixture('supplier_profile_sample_characters_314.json')
    .then((data) => {
      cy.xpath('(//div[@class=\'v-input__slot\'])[5]')
        .type(data.description);
    });

  cy.xpath('//button[@class=\'md-button save-btn md-theme-default\']')
    .click();
  
  // 断言前端是否显示错误提示
  cy.contains('Failed to update company information').should('be.visible');

  cy.wait('@submitCompanyOverview').then(({response}) => {
    expect(response.statusCode).to.eq(500);
  });
});

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