Cypress 12：如何在本地与BitBucket CI中安全配置变量

一、本地开发环境配置 #

1. 创建私密环境变量文件
   在项目根目录新建.env文件，将所有敏感变量存入其中：

CYPRESS_PROJECT_ID=XXXX
MAILOSAUR_API_KEY=XXXXXX
MAILOSAUR_SERVERID=XXXX
MAILOSAUR_TESTEMAIL=XXX
BROWSERSTACK_USERNAME=XXXXX
BROWSERSTACK_ACCESS_KEY=XXXXX

必须把.env添加到.gitignore中，绝对不能提交到代码仓库。

2. 修改cypress.config.js读取环境变量
   移除硬编码的敏感值，改用系统环境变量读取：

{
  projectId: process.env.CYPRESS_PROJECT_ID,
  env: {
    MAILOSAUR_API_KEY: process.env.MAILOSAUR_API_KEY,
    SERVERID: process.env.MAILOSAUR_SERVERID,
    TESTEMAIL: process.env.MAILOSAUR_TESTEMAIL
  },
}

新版Cypress默认支持加载.env文件，若不兼容则执行npm install dotenv --save-dev安装依赖。

3. 处理BrowserStack配置
   避免硬编码Browserstack.json，可通过两种方式处理：

• 方式一：在测试脚本中直接读取环境变量

  // 测试脚本或BrowserStack初始化代码中
  const browserstackAuth = {
    username: process.env.BROWSERSTACK_USERNAME,
    access_key: process.env.BROWSERSTACK_ACCESS_KEY
  };
  

• 方式二：动态生成配置文件
  在package.json的scripts中添加生成命令：

  "scripts": {
    "gen-browserstack-config": "echo '{\"auth\":{\"username\":\"'$BROWSERSTACK_USERNAME'\",\"access_key\":\"'$BROWSERSTACK_ACCESS_KEY'\"}}' > Browserstack.json"
  }
  

  运行测试前先执行npm run gen-browserstack-config。

二、BitBucket CI/CD环境配置 #

1. 添加仓库加密变量
   进入BitBucket仓库的Settings > Pipelines > Repository variables，逐个添加所有敏感变量，勾选Secured选项加密存储，变量会自动隐藏，不会在CI日志中暴露。

2. 配置BitBucket Pipelines脚本
   在bitbucket-pipelines.yml中直接引用变量，无需额外配置：

pipelines:
  default:
    - step:
        name: 运行E2E测试
        image: cypress/browsers:node18.12.0-chrome107
        script:
          - npm install
          # 若需要生成BrowserStack配置文件
          - echo '{"auth":{"username":"'$BROWSERSTACK_USERNAME'","access_key":"'$BROWSERSTACK_ACCESS_KEY'"}}' > Browserstack.json
          - npm run test:e2e

核心注意事项 #

• 绝对禁止将敏感变量硬编码到代码或配置文件中，也不能提交包含敏感值的文件到仓库。
• 本地.env文件必须加入.gitignore，防止意外泄露。
• BitBucket的Secured变量仅对当前仓库可见，且不会在CI运行日志中显示。

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