Cypress中使用cy.intercept获取新值后，如何动态更新数组并迭代测试？

问题描述 #

现有如下Cypress测试代码：

let data = [
  {
    track: 'Track 1',
    case: [{name: 'case 1.1'}, {name: 'case 1.2'}],
  },
];

describe(`All test`, {tags: '@testConcept'}, () => {
  beforeEach(() => {
    // 登录并获取新数据进行更新
    data = [
      {
        track: 'Track 3',
        case: [{name: 'case 3.1'}, {name: 'case 3.2'}],
      },
    ];
  });

  data.forEach((el) => {
    describe(`Test :`, () => {
      it(`Test Track :  ${JSON.stringify(el.track)}`, () => {
        cy.log(el.track); // 期望输出 Track 3
      });

      el.case.forEach((el2) => {
        it(`Test case :  ${JSON.stringify(el2.name)}`, () => {
          cy.log(el2.name); // 期望输出 case 3.1
        });
      });
    });
  });
});

当前问题：data变量已被赋值，但测试仍使用初始的Track 1相关数据，而非beforeEach中更新的Track 3数据。

问题原因 #

Cypress的describe和it是在代码加载阶段同步解析生成测试结构的，而beforeEach是在每个测试用例运行前才执行的异步钩子。你当前的data.forEach在代码加载时就已执行，此时data还是初始的Track 1数据，后续beforeEach里修改data不会改变已经生成的测试用例。

解决方案 #

方案1：异步获取数据后动态生成用例 #

如果数据是通过cy.intercept拦截接口获取的，需要在before钩子中完成数据请求，然后在回调里动态生成测试用例：

describe(`All test`, {tags: '@testConcept'}, () => {
  let testData;

  before(() => {
    // 拦截目标接口，模拟或获取真实响应数据
    cy.intercept('GET', '/api/tracks', {
      body: [
        {
          track: 'Track 3',
          case: [{name: 'case 3.1'}, {name: 'case 3.2'}],
        },
      ]
    }).as('getTracks');

    // 触发接口请求并等待响应
    cy.visit('/target-page'); // 假设页面加载会触发数据请求
    cy.wait('@getTracks').then((interception) => {
      testData = interception.response.body;
    });
  });

  // 等待数据准备完成后动态生成用例
  it('初始化测试用例', () => {
    cy.wrap(testData).each((trackItem) => {
      describe(`测试Track: ${trackItem.track}`, () => {
        it(`验证Track名称: ${trackItem.track}`, () => {
          cy.log(trackItem.track);
        });

        trackItem.case.forEach((caseItem) => {
          it(`验证Case名称: ${caseItem.name}`, () => {
            cy.log(caseItem.name);
          });
        });
      });
    });
  });
});

方案2：使用全局环境变量存储数据 #

把获取到的数据存入Cypress.env，在同步代码中读取并生成用例：

describe(`All test`, {tags: '@testConcept'}, () => {
  before(() => {
    cy.intercept('GET', '/api/tracks', {
      body: [
        {
          track: 'Track 3',
          case: [{name: 'case 3.1'}, {name: 'case 3.2'}],
        },
      ]
    }).as('getTracks');

    cy.visit('/target-page');
    cy.wait('@getTracks').then((interception) => {
      // 将数据存入全局环境变量
      Cypress.env('testData', interception.response.body);
    });
  });

  // 从全局环境变量读取数据，同步生成测试用例
  Cypress.env('testData').forEach((trackItem) => {
    describe(`测试Track: ${trackItem.track}`, () => {
      it(`验证Track名称: ${trackItem.track}`, () => {
        cy.log(trackItem.track);
      });

      trackItem.case.forEach((caseItem) => {
        it(`验证Case名称: ${caseItem.name}`, () => {
          cy.log(caseItem.name);
        });
      });
    });
  });
});

关键提示 #

• Cypress的测试结构（describe/it）是同步解析生成的，异步钩子中修改的变量无法影响已生成的测试用例。
• 动态生成用例必须确保数据已获取完成，再执行用例生成逻辑。

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