Cypress动态生成测试标题异常：嵌套it未显示如何解决？

问题描述 #

刚接触Cypress，想要实现以下需求：

• 请求接口获取数据数组
• 为数组中的每一条数据动态生成测试用例标题

尝试的代码：

describe('Some RANDOM TESTSS', () => {
  let endTimes;
  before(() => {
    cy.task('getEndTimes').then((da) => {
      endTimes = da;
    });
  });
  describe(' I am going to test here ', () => {
    it('should have access to myObject', () => {
      expect(endTimes).to.exist;
    });
    it('Do something ', () => {
      endTimes.forEach((endTime, index) => {
        it(`should vvalidate for ${endTime.recordName} `, () => {
          expect(endTime.expectedEndTime).to.be.equals(endTime.actualEndTime);
        });
      })
    })
  })
})

遇到的问题：动态生成的测试用例should validate for ${endTime.recordName}无法显示。

问题原因 #

Cypress的it测试用例是在测试启动阶段就完成注册解析的，你的代码存在两个核心问题：

1. before钩子属于测试运行阶段逻辑，此时测试用例已经注册完成，endTimes还未被赋值。
2. 把动态生成it的逻辑嵌套在了另一个it内部，Cypress不会识别这种嵌套结构的测试用例。

解决方法 #

方案一：提前获取数据并在describe级别生成用例 #

利用before钩子确保数据加载完成后，直接在describe层级下生成测试用例，避免嵌套在it内部：

describe('Some RANDOM TESTSS', () => {
  let endTimes;

  before(() => {
    // 返回Promise确保Cypress等待数据获取完成
    return cy.task('getEndTimes').then((da) => {
      endTimes = da;
    });
  });

  // 在describe直接下属层级动态生成测试用例
  Cypress._.each(endTimes, (endTime) => {
    it(`should validate for ${endTime.recordName}`, () => {
      expect(endTime.expectedEndTime).to.equal(endTime.actualEndTime);
    });
  });

  it('should have access to endTimes', () => {
    expect(endTimes).to.exist;
  });
});

方案二：同步加载数据（更稳定的动态生成） #

如果异步获取数据导致测试用例注册时机不对，可以在Cypress配置文件中提前同步加载数据，通过环境变量传递到测试文件：

1. 修改cypress.config.js：

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 同步方式获取数据（比如读取本地JSON文件或同步接口请求）
      const endTimes = require('./cypress/fixtures/endTimes.json');
      config.env.endTimes = endTimes;
      return config;
    },
  },
});

2. 测试文件中直接使用环境变量生成用例：

describe('Some RANDOM TESTSS', () => {
  const endTimes = Cypress.env('endTimes');

  Cypress._.each(endTimes, (endTime) => {
    it(`should validate for ${endTime.recordName}`, () => {
      expect(endTime.expectedEndTime).to.equal(endTime.actualEndTime);
    });
  });
});

关键注意点 #

• 禁止在it块内部嵌套it，Cypress不支持这种嵌套结构的测试用例。
• 动态生成测试用例的逻辑必须放在测试注册阶段（即describe的直接下属代码块），而非测试运行阶段的钩子（before/it内部）。
• 异步获取数据时，要确保数据在测试用例注册前已加载完成，否则会因endTimes未赋值导致动态用例无法生成。

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