如何为ng e2e命令传递Cypress参数并展开环境变量？

核心原因 #

你遇到的问题是因为ng e2e通过@cypress/schematic:cypress构建器代理Cypress命令，参数传递规则和直接调用npx cypress不同，不能直接照搬Cypress的原生参数写法，且环境变量需要通过构建器的特定方式转发给Cypress进程。

可行解决方案 #

方案1：通过angular.json配置自定义环境 #

修改你的angular.json，在e2e的configurations中添加自定义配置，明确指定Cypress配置文件和环境变量占位：

"e2e": {
    "builder": "@cypress/schematic:cypress",
    "options": {
        "devServerTarget": "pas-ng-xdm:serve",
        "watch": true,
        "headless": false
    },
    "configurations": {
        "production": {
            "devServerTarget": "pas-ng-xdm:serve:production"
        },
        "dev": {
            "configFile": "dev-cypress.config.ts",
            "env": {
                "USERNAME": "",
                "PASSWORD": ""
            }
        }
    }
}

然后通过shell传递环境变量并指定配置运行：

USERNAME=$EMAIL PASSWORD=$SECRET ng e2e --configuration=dev

Angular CLI会自动读取shell中的环境变量，注入到Cypress的运行环境中。

方案2：直接通过命令行参数传递 #

使用构建器支持的configFile参数指定配置文件，并用--env传递环境变量：

ng e2e --configFile=dev-cypress.config.ts --env USERNAME=$EMAIL,PASSWORD=$SECRET

这里的--env是@cypress/schematic:cypress构建器专门用来传递Cypress环境变量的入口，多个变量用逗号分隔。

方案3：透传Cypress原生命令 #

如果想完全沿用npx cypress的参数写法，可以用--将参数直接透传给Cypress：

ng e2e -- --config-file dev-cypress.config.ts --env USERNAME=$EMAIL,PASSWORD=$SECRET

--后面的参数会直接转发给Cypress进程，和你直接运行npx cypress的参数格式完全一致。

为什么之前的写法无效 #

• 直接在ng e2e前设置的环境变量，默认不会被构建器转发给Cypress进程，需要通过--env或配置文件中的env字段显式传递。
• 你使用的--config-file是Cypress原生参数，但ng e2e的构建器对应的参数是configFile（驼峰命名），除非用--透传，否则无法识别。
• 直接追加--USERNAME=$EMAIL这种参数Cypress不会识别，必须通过--env指定环境变量。

注：ng e2e并非只能加载默认的cypress.config.ts，只要用对参数方式，完全可以指定自定义配置文件。

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