Cypress技术问题：能否根据测试文件路径修改视口尺寸？

我正在为一款以移动端用户为主、但存在部分笔记本端管理员用户的应用编写测试套件。我希望大部分测试采用移动端视口，因此已在cypress.config.js文件中配置如下代码：

viewportHeight: 1280,
viewportWidth: 720,

上述配置十分简洁。但面向笔记本用户的测试均存放在单独文件夹中，我想了解在Cypress中是否存在一种简便方法（无需在每个测试用例中单独编写代码），可根据测试文件的特定路径自动切换为不同的视口尺寸？我暂未找到简洁的实现方式。

移动端与笔记本端用户的测试场景无重叠，并非要在两种视口下测试所有页面，仅需让某一文件夹内的测试使用与其他文件夹不同的视口高度和宽度。

你可以借助Cypress的全局钩子实现这个需求，无需在每个测试文件中重复编写代码，具体步骤如下：

1. 添加全局前置钩子
   打开cypress/support/e2e.js（或项目对应的支持文件），添加beforeEach钩子，通过Cypress.spec.filePath获取当前测试文件的路径，判断是否属于目标文件夹后设置对应视口：

beforeEach(() => {
  // 替换为你的笔记本端测试文件夹路径标识，比如「desktop-admin」
  const isDesktopTest = Cypress.spec.filePath.includes('/desktop-admin/');
  
  if (isDesktopTest) {
    // 设置笔记本端视口尺寸，示例为1920x1080
    cy.viewport(1920, 1080);
  } else {
    // 使用全局配置的移动端视口，也可在此显式设置
    cy.viewport(720, 1280);
  }
});

2. 优化配置灵活性（可选）
   如果想让视口参数集中管理，可在cypress.config.js中新增桌面端视口配置，再在钩子中引用：

// cypress.config.js
module.exports = defineConfig({
  e2e: {
    viewportHeight: 1280,
    viewportWidth: 720,
    // 新增桌面端视口配置
    desktopViewport: {
      width: 1920,
      height: 1080
    }
  }
});

// cypress/support/e2e.js
beforeEach(() => {
  const isDesktopTest = Cypress.spec.filePath.includes('/desktop-admin/');
  const { viewportWidth, viewportHeight, desktopViewport } = Cypress.config();
  
  if (isDesktopTest) {
    cy.viewport(desktopViewport.width, desktopViewport.height);
  } else {
    cy.viewport(viewportWidth, viewportHeight);
  }
});

这种实现方式的优势：

• 所有测试自动匹配对应视口，无需逐个文件修改
• 配置集中，后续调整视口尺寸只需修改一处
• 完美匹配「按文件夹区分测试场景」的需求

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