Laravel项目中如何动态设置Cypress的cypress.json内baseUrl参数

首先明确：cypress.json 是静态配置文件，本身不支持动态读取环境变量，你可以通过以下两种主流方案实现从Laravel的.env文件读取APP_URL作为baseUrl：

方案1：Cypress 10及以上版本（使用cypress.config.js） #

• 首先安装dotenv依赖，用于读取.env文件内容：

npm install dotenv --save-dev

• 把你原来的cypress.json替换为项目根目录下的cypress.config.js，配置内容如下：

const { defineConfig } = require("cypress");
// 路径指向Laravel根目录的.env文件，若Cypress装在子目录可调整为对应路径，比如'../.env'
require('dotenv').config({ path: '.env' });

module.exports = defineConfig({
  e2e: {
    // 优先读取.env的APP_URL，兜底用本地默认地址
    baseUrl: process.env.APP_URL || 'http://127.0.0.1:8000',
    chromeWebSecurity: false
  },
});

• 后续只要对应环境的.env里APP_URL配置正确，Cypress启动时会自动读取对应值作为baseUrl。

方案2：Cypress 9及以下旧版本（使用plugins目录配置） #

• 同样先安装dotenv依赖：

npm install dotenv --save-dev

• 编辑cypress/plugins/index.js文件，添加以下内容：

const dotenv = require('dotenv');
dotenv.config({ path: '.env' });

module.exports = (on, config) => {
  config.baseUrl = process.env.APP_URL || config.baseUrl;
  return config;
};

• 原来的cypress.json里可以保留默认的baseUrl兜底配置即可，运行时会自动被.env里的APP_URL覆盖。

可选补充：命令行临时指定 #

如果需要临时切换baseUrl不修改.env，也可以在启动Cypress的时候直接通过参数指定：

# 打开Cypress界面时指定
npx cypress open --config baseUrl=https://你的生产环境地址

# 运行无头测试时指定
npx cypress run --config baseUrl=https://你的生产环境地址

提示：如果你的Cypress目录不在Laravel项目根目录，需要调整dotenv配置里的path路径，指向.env文件的实际位置。

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