如何为Cypress.io配置多环境切换：切换baseURL与配置文件

我之前也碰到过一模一样的需求，折腾了几种方案后，下面这种是最省心的，完美解决多环境切换时自动更新baseURL的问题：

1. 拆分环境专属配置文件 #

别把所有环境的配置都堆在单一的cypress.json里，给每个环境单独建配置文件更清晰：

• cypress.production.json（生产环境）

  {
    "baseUrl": "https://your-prod-domain.com"
  }
  

• cypress.regression.json（回归环境）

  {
    "baseUrl": "https://your-regression-domain.com"
  }
  

• cypress.staging.json（预发布环境）

  {
    "baseUrl": "https://your-staging-domain.com"
  }
  

• cypress.development.json（开发环境）

  {
    "baseUrl": "http://localhost:3000"
  }
  

主cypress.json就留一些通用配置，比如视口尺寸、超时时间这些，Cypress会自动把通用配置和环境专属配置合并，不用重复写。

2. 命令行一键切换环境 #

Cypress自带--config-file参数，能指定加载哪个配置文件。直接敲命令就能切换：

# 跑开发环境测试
npx cypress run --config-file cypress.development.json

# 切换到回归环境
npx cypress run --config-file cypress.regression.json

嫌命令太长？把这些命令加到package.json的脚本里，以后切换环境只需要敲个npm命令：

{
  "scripts": {
    "cy:prod": "cypress run --config-file cypress.production.json",
    "cy:regression": "cypress run --config-file cypress.regression.json",
    "cy:staging": "cypress run --config-file cypress.staging.json",
    "cy:dev": "cypress run --config-file cypress.development.json",
    "cy:open:dev": "cypress open --config-file cypress.development.json"
  }
}

比如要打开开发环境的Cypress界面，直接npm run cy:open:dev就行，超方便。

3. 进阶玩法：用环境变量动态控制 #

如果想更灵活，比如通过环境变量来指定环境，不用改命令，那可以换成cypress.config.js（Cypress 10+推荐用JS/TS配置文件），写点逻辑动态加载配置：

const { defineConfig } = require('cypress');
const fs = require('fs');

module.exports = defineConfig({
  // 通用配置
  viewportWidth: 1280,
  viewportHeight: 720,
  e2e: {
    setupNodeEvents(on, config) {
      // 读取环境变量，默认用开发环境
      const targetEnv = process.env.CYPRESS_ENV || 'development';
      // 加载对应环境的配置文件
      const envSpecificConfig = JSON.parse(fs.readFileSync(`cypress.${targetEnv}.json`, 'utf8'));
      // 合并通用和环境配置
      return { ...config, ...envSpecificConfig };
    },
  },
});

运行时只需要设置环境变量就行：

# 跑回归环境测试（Mac/Linux）
CYPRESS_ENV=regression npx cypress run

# Windows系统用set命令
set CYPRESS_ENV=regression && npx cypress run

同样可以把这些加到package.json脚本里，进一步简化操作。

官方文档相关依据 #

Cypress的配置系统支持配置文件合并和命令行参数覆盖，这也是上面方案的核心。用--config-file时，环境专属配置会和主配置合并，baseUrl这类特定配置会自动覆盖通用配置里的内容。另外，也可以直接用环境变量CYPRESS_BASE_URL临时指定，但拆分配置文件的方式更适合维护多个环境的完整配置集合。

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