GitLab CI中Angular 10的ng test超时挂起问题排查与解决

问题原因 #

看你贴的CI日志，一眼就能定位核心问题：

09 10 2020 09:32:21.919:ERROR [launcher]: 您的平台上没有Chrome浏览器的二进制文件，请设置"CHROME_BIN"环境变量

你使用的node:14.13.1-alpine3.12是轻量镜像，默认没有预装Chrome浏览器。Angular测试依赖的Karma框架必须启动浏览器执行测试用例，当Karma找不到可用浏览器时，会一直处于等待状态，最终触发GitLab CI的10分钟超时机制，导致任务挂起。

解决办法 #

1. 在CI镜像中安装无头Chrome及依赖 #

Alpine镜像需要手动安装Chromium（Chrome的开源版）和相关驱动，同时指定Chrome二进制文件的环境变量。直接修改你的.gitlab-ci.yml：

image: node:14.13.1-alpine3.12
before_script:
  # 安装Chromium及依赖，--no-cache避免缓存冗余
  - apk add --no-cache chromium chromium-chromedriver
  # 告诉Karma Chrome二进制文件的路径
  - export CHROME_BIN=/usr/bin/chromium-browser
  # 安装项目所有依赖，包括Angular CLI和测试工具
  - npm install
build:
  stage: build
  # 用无头Chrome运行测试，关闭watch模式（CI环境无需实时监听）
  script: npm test --watch=false --browsers=ChromeHeadless
  only:
    - master
    - merge_requests

2. （可选）让Karma默认使用无头Chrome #

如果不想每次在命令行指定--browsers=ChromeHeadless，可以修改项目根目录的karma.conf.js，将默认浏览器设置为无头Chrome：

找到browsers配置项，替换为：

browsers: ['ChromeHeadless'],

若配置中没有customLaunchers，可以补充添加（Angular 10默认配置通常已包含，保险起见可确认）：

customLaunchers: {
  ChromeHeadless: {
    base: 'Chrome',
    flags: [
      '--headless', // 无头模式，无需图形界面
      '--disable-gpu', // CI环境无需GPU加速
      '--no-sandbox', // 绕过沙箱适配Alpine环境
      '--remote-debugging-port=9222'
    ]
  }
},

3. 确认测试依赖完整 #

确保项目已安装karma-chrome-launcher，本地执行以下命令后提交依赖文件：

npm install karma-chrome-launcher --save-dev

完成以上配置后，GitLab CI会在Alpine镜像中启动无头Chrome执行测试，不会再因找不到浏览器而超时挂起。

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