Cypress遍历viewport测试时beforeEach取数组末值问题如何解决

这个问题是Mocha（Cypress底层依赖的测试框架）执行机制和JavaScript闭包特性共同导致的：

• 测试文件加载阶段，forEach会同步遍历完所有viewports项，完成所有it用例的注册
• beforeEach钩子是在用例实际运行阶段才触发的，如果你把视口调整逻辑写在describe根层级的全局beforeEach里，等钩子执行时循环早就结束了，闭包里引用的viewport变量已经固定为数组的最后一个值，自然没法匹配每个用例对应的视口参数。

方案1：循环内定义专属beforeEach（最简便） #

把beforeEach挪到forEach循环内部，给每个视口对应的测试用例单独注册钩子，这样每个钩子的闭包会独立捕获当前遍历项的viewport值，不会被后续遍历覆盖。
修正后的代码：

describe('多视口适配测试', function () {
  viewports.forEach((viewport) => {
    // 每个视口对应独立的beforeEach，绑定当前遍历的视口参数
    beforeEach(function () {
      cy.viewportAdjust(viewport);
    });

    it(`${viewport} 视口下的适配校验`, function () {
      // 此处编写该视口下的测试断言逻辑，无需重复调整视口
    });
  });
});

方案2：测试上下文传参（适合统一管理钩子的场景） #

如果不想在循环内重复写钩子，可以在注册用例时把当前视口参数绑定到测试实例上，全局beforeEach运行时直接从当前测试上下文读取对应参数即可：

describe('多视口适配测试', function () {
  beforeEach(function () {
    // 读取当前用例绑定的视口参数
    const activeViewport = this.currentTest.viewport;
    cy.viewportAdjust(activeViewport);
  });

  viewports.forEach((viewport) => {
    it(`${viewport} 视口下的适配校验`, function () {
      // 此处编写该视口下的测试断言逻辑
    }).viewport = viewport; // 给当前用例实例绑定对应视口参数
  });
});

原代码里的it.only需要移除：it.only写在循环中时，每次遍历都会覆盖之前的only标记，最终只会执行数组最后一个视口对应的测试用例，全量执行测试时直接使用it定义用例即可。

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