Cypress中cy.wait返回response.body偶现undefined问题排查

问题背景 #

我基于Cypress编写了E2E测试，通过以下函数Mock用户和供应商接口的响应：

export function getUserAndSupplier(): void {
    cy.intercept('GET', `${Cypress.env('BaseUrl')}/users/me`,
        {
            fixture: 'shared/Users/me.json',
        })
        .as('users');

    cy.intercept('GET', `${Cypress.env('BaseUrl')}/users/me/supplier`,
        {
            fixture: 'shared/Suppliers/supplier.json',
        })
        .as('supplier');
}

同时用以下函数校验响应是否符合预期：

export function checkUserAndSupplier(): void {
    cy.wait('@users')
        .its('response.body')
        .should('not.be.undefined')
        .then((interception: any) => {
         
        //字段断言逻辑
        });

    cy.wait('@supplier')
        .its('response.body')
        .should('not.be.undefined')
        .then((interception: GetCurrentSupplierResponse) => {

         //字段断言逻辑
        });
}

测试集成了Cucumber预处理器，步骤定义如下：

beforeEach(() => {
    // 拦截用户和供应商接口
    getUserAndSupplier();
    // 拦截GET /paymentProviders接口
    interceptPaymentProviders();
});

Given('User navigates to the {string} page', () => {
    cy.visit('/sell/payment-providers');
    // 断言用户和供应商接口调用
    checkUserAndSupplier();
});

When('User clicks on {string} button', () => {
    getActivationButton()
        .scrollIntoView()
        .contains('Activate')
        .should('be.visible')
        .and('not.be.disabled')
        .click();

    // 确认Continue按钮处于禁用状态
    getContinueButton()
        .should('be.visible')
        .and('be.disabled');

});

对应的.feature测试场景：

Scenario: Happy path - activate payment method

Given User navigates to the "sell/payment-providers" page
When User clicks on "activate" button
Then User is able to successfully activate payment provider

目前遇到的问题：尽管fixture文件非空有效，但response.body偶尔会出现undefined，导致测试不稳定，且已排除异步函数缺少await的可能。

可能的原因 #

1. 接口拦截URL匹配不一致 #

Cypress.env('BaseUrl')的取值可能存在不确定性，比如有时末尾带斜杠、有时不带，拼接后形成的URL（如https://xxx.com//users/me）和页面实际发起的请求URL不匹配，导致拦截未生效。此时cy.wait('@users')捕获的可能是未被Mock的真实请求，若真实请求因网络或后端问题未返回有效响应，就会出现response.body为undefined的情况。

另外，部分系统（如Linux）对文件路径大小写敏感，若fixture路径（如shared/Users/me.json）和实际文件路径大小写不匹配，会导致Cypress无法加载fixture，返回空响应。

2. 拦截时机与接口发起时机不匹配 #

虽然getUserAndSupplier()在beforeEach中执行，但如果页面在cy.visit之前就发起了接口请求（比如页面有预加载逻辑），或者cy.visit后接口发起速度快于拦截生效速度，就会导致部分请求未被Mock，进而response.body异常。

3. 接口重复调用导致cy.wait捕获错误请求 #

页面可能多次调用/users/me或/supplier接口，cy.wait('@users')默认捕获第一次匹配的请求，但如果后续请求未被正确Mock（或因拦截覆盖等问题），就可能出现响应异常的情况。

4. Fixture加载异步延迟 #

尽管Cypress会自动处理fixture的异步加载，但在某些极端场景下（如测试环境IO性能波动），fixture可能未完全加载就已返回响应，导致response.body为undefined。

解决方案建议 #

1. 确保URL匹配准确 #

• 打印并验证拼接后的拦截URL与实际请求URL一致：在getUserAndSupplier()中添加console.log(${Cypress.env('BaseUrl')}/users/me)，对比浏览器开发者工具中实际请求的URL。
• 使用相对路径或正则表达式匹配URL，避免BaseUrl拼接问题：比如cy.intercept('GET', '/users/me', ...)（若Cypress已配置baseUrl），或用正则cy.intercept('GET', /\/users\/me$/, ...)。
• 检查fixture路径大小写，确保与实际文件系统一致。

2. 调整拦截与断言时机 #

• 在cy.visit后先等待页面核心元素加载完成，再执行checkUserAndSupplier()，确保接口已发起并被拦截：

  Given('User navigates to the {string} page', () => {
      cy.visit('/sell/payment-providers');
      cy.get('[data-testid="page-loaded-marker"]').should('be.visible'); // 替换为页面实际加载完成的标识元素
      checkUserAndSupplier();
  });
  

• 确保拦截在页面加载前完全生效：可将getUserAndSupplier()放在before()而非beforeEach()中，或在拦截后添加cy.wait(0)确保异步逻辑完成（仅临时调试用）。

3. 校验拦截的请求次数与有效性 #

• 使用cy.get('@users.all')查看所有匹配的拦截请求，确认是否有未被Mock的请求：

  checkUserAndSupplier();
  cy.get('@users.all').then((interceptions) => {
      console.log('所有/users/me请求:', interceptions);
  });
  

• 增强cy.wait的断言逻辑，先确认响应存在再校验body：

  cy.wait('@users')
    .should((interception) => {
      expect(interception.response).to.exist;
      expect(interception.response.statusCode).to.eq(200);
      expect(interception.response.body).to.not.be.undefined;
    })
    .then((interception) => {
      // 字段断言逻辑
    });
  

4. 明确指定响应状态码 #

在cy.intercept中显式设置statusCode，确保返回合法响应：

cy.intercept('GET', `${Cypress.env('BaseUrl')}/users/me`,
    {
        statusCode: 200,
        fixture: 'shared/Users/me.json',
    })
    .as('users');

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