Cypress v10如何通过分离文件配置多环境baseUrl？

Cypress v10 改用 cypress.config.js（或 .ts）作为核心配置文件，不再支持旧版 cypress.json 的 extends 语法，但可以通过以下几种方式实现多环境配置，无需手动修改 baseUrl：

方式一：拆分环境配置文件 + 环境变量读取 #

这种方式最接近你旧版的配置习惯：

1. 创建独立环境配置文件
   在项目根目录下创建对应环境的配置文件：

   • cypress.env.integration.json

     {
       "baseUrl": "https://www.integration-website.com"
     }
     

   • cypress.env.stage.json

     {
       "baseUrl": "https://www.staging-website.com"
     }
     

   • cypress.env.prod.json

     {
       "baseUrl": "https://www.production-webs.com"
     }
     

2. 修改 cypress.config.js 动态加载配置
   通过环境变量判断要加载的配置文件，合并到Cypress配置中：

   const { defineConfig } = require('cypress')
   const fs = require('fs')
   
   module.exports = defineConfig({
     e2e: {
       setupNodeEvents(on, config) {
         // 默认使用集成环境，可通过环境变量覆盖
         const env = process.env.CYPRESS_ENV || 'integration'
         // 读取对应环境的配置文件
         const envConfig = JSON.parse(fs.readFileSync(`cypress.env.${env}.json`, 'utf8'))
         // 替换baseUrl
         config.baseUrl = envConfig.baseUrl
         return config
       },
       // 配置默认baseUrl（可选）
       baseUrl: "https://www.integration-website.com"
     }
   })
   

3. 运行时指定环境
   在命令行通过环境变量切换测试环境：

   # 运行集成环境测试
   CYPRESS_ENV=integration npx cypress run
   # 运行Staging环境测试
   CYPRESS_ENV=stage npx cypress run
   # 运行Production环境测试
   CYPRESS_ENV=prod npx cypress run
   

方式二：直接通过命令行参数传递 baseUrl #

如果不想创建额外配置文件，可直接在运行命令中指定：

# 运行Staging环境测试
npx cypress run --config baseUrl=https://www.staging-website.com
# 运行Production环境测试
npx cypress run --config baseUrl=https://www.production-webs.com

方式三：在 cypress.config.js 中内置多环境分支 #

直接在主配置文件中通过分支逻辑返回对应环境的配置：

const { defineConfig } = require('cypress')

const getEnvConfig = () => {
  const env = process.env.CYPRESS_ENV || 'integration'
  switch(env) {
    case 'stage':
      return { baseUrl: 'https://www.staging-website.com' }
    case 'prod':
      return { baseUrl: 'https://www.production-webs.com' }
    default:
      return { baseUrl: 'https://www.integration-website.com' }
  }
}

module.exports = defineConfig({
  e2e: {
    ...getEnvConfig(),
    setupNodeEvents(on, config) {
      // 其他节点事件逻辑
    }
  }
})

以上三种方式都能实现无需手动修改配置文件即可切换测试环境的需求。

内容的提问来源于stack exchange，提问作者Gabriel Peñarrieta Molina