Cypress技术问题：如何在describe块中使用函数返回的数组执行forEach循环生成测试用例

我明白你遇到的痛点了——Cypress的异步命令和Mocha同步的测试用例声明之间的冲突，导致你没法用页面上获取的数组来动态生成it测试用例。咱们来一步步解决这个问题：

问题根源 #

Mocha的it测试用例是同步声明的，也就是说在测试套件初始化的时候，所有的it就已经被定义好了。但你的getOffersCategories()函数依赖Cypress的异步命令（cy.get、.then），这意味着你没法在同步阶段直接拿到数组值，自然没法循环生成测试用例。

解决方案：在before钩子中动态生成测试用例 #

我们可以把获取数组的逻辑放在before钩子中，等异步操作完成拿到数组后，再动态创建it测试用例。这样就能保证数组值已经准备好的时候，测试用例才会被声明。

步骤1：修改你的获取数组函数 #

首先调整getOffersCategories，让它返回Cypress的命令链，这样我们可以用.then拿到数组：

function getOffersCategories() {
  // 返回cy.get的命令链，方便后续.then获取结果
  return cy.get(offersHeaders).then($els => {
    return Cypress._.map(Cypress.$.makeArray($els), 'innerText');
  });
}

步骤2：在before钩子中动态生成测试用例 #

接下来在测试套件中，先访问目标页面，获取数组后循环创建it：

describe('Offers Category Validation', () => {
  let offersCategories;

  before(() => {
    // 先访问页面，确保目标元素加载完成
    cy.visit('/your-offers-page-url');
    
    // 获取分类数组，然后动态生成测试用例
    getOffersCategories().then(categories => {
      offersCategories = categories;
      
      categories.forEach((item, index) => {
        it(`Validate Max Carousels, Swipe & See All for "${item}"`, function() {
          // 这里写你的验证逻辑，比如先切换到当前分类
          cy.contains(item).click();
          
          // 验证轮播数量上限
          cy.get('.carousel-container .carousel-item')
            .should('have.length.lte', 5); // 替换成你的预期上限值
          
          // 验证左右滑动功能
          cy.get('.swipe-left-btn').click();
          cy.get('.carousel-item.active').should('not.be.first');
          
          cy.get('.swipe-right-btn').click();
          cy.get('.carousel-item.active').should('not.be.last');
          
          // 验证See All链接
          cy.contains('See All')
            .should('be.visible')
            .should('have.attr', 'href')
            .and('include', item.toLowerCase().replace(/\s+/g, '-'));
        });
      });
    });
  });

  // 占位测试用例：防止Mocha因为初始化时没有测试用例而报错
  it('Test suite initialization placeholder', () => {
    expect(true).to.be.true;
  });
});

为什么这个方法可行？ #

• before钩子会在所有测试用例执行前运行，并且会等待内部的异步Cypress命令完成。
• 当我们在.then回调中拿到数组后，再调用it创建测试用例，此时数组值已经确定，循环就能正常生成对应的测试用例。
• 占位的it是为了避免Mocha在动态生成测试用例前，因为检测不到任何测试用例而抛出错误。

额外注意事项 #

• 确保offersHeaders是正确的选择器，能定位到页面上的分类元素。
• 如果你的页面需要登录或其他前置操作，记得在before钩子中先完成这些步骤。
• 动态生成的测试用例会按照数组顺序执行，每个it都是独立的测试用例，方便定位问题。

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