CircleCI中用Karma执行单元测试遇CHROME_BIN配置问题求助

问题场景 #

在CircleCI执行Angular单元测试时，反复收到「Please set env variable CHROME_BIN」错误提示。已做如下配置但问题未解决：

• CircleCI任务中添加环境变量CHROME_BIN=/usr/bin/google-chrome
• Karma配置文件中设置config.set({browsers: ['ChromeHeadless']})

测试任务代码 #

test:
  docker:
    - image: cimg/node:16.19.0-browsers
      environment:
        - CHROME_BIN=/usr/bin/google-chrome
  steps:
    - checkout
    - run: npm install
    - run:
        command: npm test

CI报错信息 #

#!/bin/bash -eo pipefail
npm test

> api-data@0.0.0 test
> ng test

- Generating browser application bundles (phase: setup)...
✔ Browser application bundle generation complete.
07 01 2023 23:22:42.949:WARN [karma]: No captured browser, open http://localhost:9876/
07 01 2023 23:22:42.959:INFO [karma-server]: Karma v6.4.1 server started at http://localhost:9876/
07 01 2023 23:22:42.959:INFO [launcher]: Launching browsers Chrome with concurrency unlimited
07 01 2023 23:22:42.961:INFO [launcher]: Starting browser Chrome
07 01 2023 23:22:43.020:ERROR [launcher]: Cannot start Chrome
    Can not find the binary /usr/bin/google-chrome
    Please set env variable CHROME_BIN
07 01 2023 23:22:43.020:ERROR [launcher]: Chrome stdout: 
07 01 2023 23:22:43.020:ERROR [launcher]: Chrome stderr:

问题分析 #

1. Karma配置未生效：报错显示Karma尝试启动的是Chrome而非配置的ChromeHeadless，说明Angular的测试命令可能覆盖了Karma配置（比如angular.json中的test配置优先级更高）。
2. Chrome路径错误：cimg/node:16.19.0-browsers镜像中，Chrome的实际二进制文件路径并非/usr/bin/google-chrome，而是/usr/bin/google-chrome-stable。

解决步骤 #

步骤1：确认Chrome实际路径 #

在CircleCI任务中添加验证步骤，确认镜像内Chrome的位置：

test:
  docker:
    - image: cimg/node:16.19.0-browsers
  steps:
    - checkout
    - run: which google-chrome-stable  # 输出路径通常为/usr/bin/google-chrome-stable
    - run: npm install
    - run: npm test

步骤2：修正环境变量与Karma配置 #

方法A：调整CircleCI环境变量路径

将CHROME_BIN设置为实际路径：

test:
  docker:
    - image: cimg/node:16.19.0-browsers
      environment:
        - CHROME_BIN=/usr/bin/google-chrome-stable
  steps:
    - checkout
    - run: npm install
    - run: npm test

方法B：强制指定ChromeHeadless运行

直接在测试命令中指定浏览器，避免配置冲突：
修改package.json中的test脚本：

{
  "scripts": {
    "test": "ng test --browsers ChromeHeadless"
  }
}

方法C：完善Karma的Headless配置

在karma.conf.js中添加Headless模式的启动参数，确保Chrome能在CI环境中正常运行：

module.exports = function(config) {
  config.set({
    browsers: ['ChromeHeadless'],
    customLaunchers: {
      ChromeHeadless: {
        base: 'Chrome',
        flags: [
          '--headless',
          '--disable-gpu',
          '--no-sandbox',  // CI环境必需，避免权限问题
          '--remote-debugging-port=9222'
        ]
      }
    }
  });
};

步骤3：验证配置 #

重新运行CircleCI任务，确认报错消失，测试正常执行。

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