Cypress中如何遍历Fixture内两个数组并区分分组执行测试

方法一：合并数组并标记来源 #

先读取people.json Fixture，给每个人员添加来源标记后合并数组，再统一遍历执行测试，通过标记区分分支逻辑：

describe('所有人员信息提交测试', () => {
  let allMarkedPeople;

  before(() => {
    cy.fixture('people.json').then(people => {
      // 为boys数组的每个成员添加来源标记
      const boysWithSource = people.boys.map(boy => ({ ...boy, source: 'boys' }));
      // 为girls数组的每个成员添加来源标记
      const girlsWithSource = people.girls.map(girl => ({ ...girl, source: 'girls' }));
      // 合并两个数组
      allMarkedPeople = [...boysWithSource, ...girlsWithSource];
    });
  });

  allMarkedPeople.forEach(person => {
    it(`验证人员：${person.name} 的信息提交`, () => {
      // 通用前置操作
      cy.visit('/person-submit-page');
      cy.get('[data-testid="name-input"]').type(person.name);
      cy.get('[data-testid="age-input"]').type(person.age);

      // 根据来源执行专属测试逻辑
      if (person.source === 'boys') {
        // Boys专属步骤：验证男性专属字段并提交
        cy.get('[data-testid="male-hobby-input"]').type(person.hobby);
        cy.get('[data-testid="submit-male-btn"]').click();
      } else {
        // Girls专属步骤：验证女性专属字段并提交
        cy.get('[data-testid="female-style-input"]').type(person.style);
        cy.get('[data-testid="submit-female-btn"]').click();
      }

      // 通用断言：验证提交成功提示
      cy.get('[data-testid="success-alert"]').should('contain', '信息提交成功');
    });
  });
});

方法二：分别遍历+复用测试函数 #

如果不想合并数组，可以分别遍历两个数组，通过复用测试函数来减少重复代码，同时明确区分来源：

describe('所有人员信息提交测试', () => {
  let peopleFixture;

  before(() => {
    cy.fixture('people.json').then(data => {
      peopleFixture = data;
    });
  });

  // 定义复用的测试逻辑函数
  const executePersonTest = (person, sourceType) => {
    it(`验证${sourceType}人员：${person.name} 的信息提交`, () => {
      cy.visit('/person-submit-page');
      cy.get('[data-testid="name-input"]').type(person.name);
      cy.get('[data-testid="age-input"]').type(person.age);

      // 分支逻辑
      if (sourceType === 'boys') {
        cy.get('[data-testid="male-hobby-input"]').type(person.hobby);
        cy.get('[data-testid="submit-male-btn"]').click();
      } else {
        cy.get('[data-testid="female-style-input"]').type(person.style);
        cy.get('[data-testid="submit-female-btn"]').click();
      }

      cy.get('[data-testid="success-alert"]').should('contain', '信息提交成功');
    });
  };

  // 遍历boys数组执行测试
  peopleFixture.boys.forEach(boy => executePersonTest(boy, 'boys'));
  // 遍历girls数组执行测试
  peopleFixture.girls.forEach(girl => executePersonTest(girl, 'girls'));
});

优化建议 #

如果分支逻辑比较复杂，可以把专属逻辑拆成独立函数，让代码更易维护：

// 封装Boys专属测试逻辑
const runBoysSpecificTest = (person) => {
  cy.get('[data-testid="male-hobby-input"]').type(person.hobby);
  cy.get('[data-testid="submit-male-btn"]').click();
};

// 封装Girls专属测试逻辑
const runGirlsSpecificTest = (person) => {
  cy.get('[data-testid="female-style-input"]').type(person.style);
  cy.get('[data-testid="submit-female-btn"]').click();
};

// 在测试函数中调用
sourceType === 'boys' ? runBoysSpecificTest(person) : runGirlsSpecificTest(person);

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