Cypress.io异步数据动态生成测试遇Cannot read undefined属性错误

问题根源 #

Cypress会同步预解析所有describe和it块，确定测试用例的数量和结构，这个过程发生在任何钩子（before/beforeEach）执行之前。你之前把数据读取放在before钩子内，此时data还未初始化，自然触发Cannot read properties of undefined (reading 'forEach')错误。

可行解决方案 #

方案一：测试文件外层同步读取CSV数据

直接在测试文件最外层用Node.js模块读取并解析CSV，这样在Cypress解析测试套件时，data已经完成初始化，就能正常动态生成it块。

示例代码：

const fs = require('fs');
const parse = require('csv-parse/sync');
const csvFile = './path/to/your/csv/file.csv'; // 调整为你的文件路径

// 同步读取并解析CSV，生成QuestionData数组
const data: QuestionData[] = parse(fs.readFileSync(csvFile), {
  columns: true, // 基于CSV表头生成对象结构
  skip_empty_lines: true // 跳过空行
});

describe("Add data to admin", () => {
  data.forEach((val, index) => {
    it(`Should add data entry ${index + 1}: ${JSON.stringify(val)}`, () => {
      // 编写你的测试逻辑，比如：
      // cy.visit('/admin/add');
      // cy.get('[data-testid="input-name"]').type(val.name);
      // ...其他操作
    });
  });
});

注意：需要先安装CSV解析依赖：

npm install csv-parse --save-dev

方案二：动态生成测试文件（复杂场景适用）

如果数据来源必须是异步操作（比如从API获取），可以写一个Node.js脚本先读取数据，再动态生成包含测试用例的.spec.ts文件，最后让Cypress运行这个生成的文件。这种方式适合数据频繁变动或来源复杂的场景。

关键提示 #

• 永远不要在describe/it内部或钩子函数里动态生成it块，因为Cypress的同步预解析阶段不会识别这些晚生成的测试用例。
• 用Node.js同步读取文件时，路径要相对于项目根目录，或者使用path.resolve确保路径正确。

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