如何在Angular项目的Cypress e2e测试中读取原有环境配置文件

核心结论 #

不需要将配置复制到e2e目录，直接读取app1下environments目录的原有配置即可，还能避免多份配置同步维护带来的冗余和不一致问题。

具体实现步骤 #

• 第一步：配置路径映射（可选，简化导入路径）
  在app1-e2e目录下的tsconfig.json中添加路径别名，直接指向app1的环境配置目录：

{
  "compilerOptions": {
    // 其余原有配置保留
    "paths": {
      "@app-environments/*": ["../app1/src/environments/*"]
    }
  }
}

• 第二步：修改Cypress配置文件加载环境变量
  在app1-e2e的cypress.config.ts（纯JS项目对应cypress.config.js）中添加动态加载逻辑，根据运行时传入的环境参数加载对应Angular环境配置：

import { defineConfig } from 'cypress'

// 动态加载对应环境的Angular配置
const getAngularEnv = (mode: string) => {
  return require(`../app1/src/environments/environment.${mode}.ts`).default
}

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // 读取运行参数传入的环境标识，默认走本地环境
      const runMode = config.env.mode || 'local'
      const angularEnv = getAngularEnv(runMode)
      // 将Angular环境的baseUrl赋值给Cypress全局配置
      config.baseUrl = angularEnv.baseUrl
      // 其余需要用到的环境变量也可以同步到Cypress的env配置中
      config.env = { ...config.env, ...angularEnv }
      return config
    }
  }
})

• 第三步：配置快捷运行命令
  在项目根目录的package.json中添加对应环境的e2e运行脚本，无需每次手动传参：

{
  "scripts": {
    // 其余原有脚本保留
    "e2e:local": "cypress run --env mode=local",
    "e2e:dev": "cypress run --env mode=dev",
    "e2e:open:local": "cypress open --env mode=local"
  }
}

• 第四步：优化测试用例
  删除用例中硬编码的baseUrl，直接读取Cypress全局配置即可：

it('should redirect to release', () => {
  cy.get('[data-testid="my-link"]').click();
  cy.url().should('include', Cypress.config('baseUrl'));
});

注意事项 #

• 确保Cypress运行时加载的环境文件，和你启动对应环境Angular应用时使用的环境文件完全一致，避免两边环境不匹配导致的测试异常。
• 如果Angular环境配置使用了production模式的文件替换逻辑，只需要在运行e2e命令时传入对应的mode参数即可，不需要额外调整配置。

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