如何为GitLab CI的NodeJS Docker镜像添加Chrome支持以运行Angular测试

问题根因 #

你使用的node:12.9是纯净的Node.js运行时镜像，未预装Chrome浏览器，因此无论是否启用无头模式，测试运行器都无法找到Chrome可执行文件。

解决方案1：更换预装Chrome的基础镜像（推荐） #

直接使用同时预装了对应版本Node.js和Chrome的镜像，无需额外安装依赖，修改你的gitlab-ci.yml中image字段即可：

stages:
- build

variables:
  NPM_CONFIG_REGISTRY: https://test.com/xx/api/npm/npm-all
  # 提前配置Chrome二进制路径，避免识别失败
  CHROME_BIN: /usr/bin/google-chrome

build:
  stage: build
  # 替换为匹配node12版本、预装Chrome的镜像，可根据实际需要的node/Chrome版本选择对应tag
  image: cypress/browsers:node12.18.3-chrome89
  script:
    - npm install
    - npm run build:prod
    # 启动无头Chrome时额外加--no-sandbox参数，适配Docker容器无沙箱权限的环境
    - ng test --no-watch --browsers=ChromeHeadless --no-sandbox
  tags:
    - DOCKER

解决方案2：在原node镜像中手动安装Chrome #

如果不想更换基础镜像，可以在构建脚本中增加Chrome安装步骤：

stages:
- build

variables:
  NPM_CONFIG_REGISTRY: https://test.com/xx/api/npm/npm-all
  CHROME_BIN: /usr/bin/google-chrome-stable

build:
  stage: build
  image: node:12.9
  script:
    # 安装Chrome依赖及Chrome本身
    - apt update && apt install -y wget gnupg2
    - wget -q -O - https://dl.google.com/linux/linux_signing_key.pub | apt-key add -
    - echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list
    - apt update && apt install -y google-chrome-stable
    # 原有构建步骤
    - npm install
    - npm run build:prod
    - ng test --no-watch --browsers=ChromeHeadless --no-sandbox
  tags:
    - DOCKER

可选优化：修改Karma配置固定运行参数 #

可以直接修改项目根目录下的karma.conf.js，把无头模式、无沙箱等参数配死，无需每次执行命令时额外传参：

// karma.conf.js 中对应配置段修改如下
browsers: ['ChromeHeadlessCI'],
customLaunchers: {
  ChromeHeadlessCI: {
    base: 'ChromeHeadless',
    flags: ['--no-sandbox', '--disable-gpu']
  }
},
singleRun: true, // 测试跑完自动退出，无需额外加--no-watch参数

修改后CI中的测试命令直接使用npm run test即可正常运行。

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