Angular test fails to run with ChromeHeadlessCI in Github Action

Question

I bootstrap a simple Angular (v10.1) app and create Github action workflow as below. Note that I have configured test to run with recommended configurations as specified in Angular Testing doc

# ./github/workflows/main.yml
name: Test master branch

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [14.10]

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - name: Cache Node.js modules
        uses: actions/cache@v2
        with:
          # npm cache files are stored in `~/.npm` on Linux/macOS
          path: ~/.npm
          key: ${{ runner.OS }}-node-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.OS }}-node-
            ${{ runner.OS }}-
      - name: Install dependencies
        run: npm install
      - name: Run lint
        run: npm lint
      - name: Run tests
        run: npm test -- --no-watch --no-progress --browsers=ChromeHeadlessCI

The test fails with error Cannot load browser "ChromeHeadlessCI": it is not registered! Perhaps you are missing some plugin?. The same error is thrown even if I try running npm test -- --no-watch --no-progress --browsers=ChromeHeadlessCI on local computer.

$ npm test -- --no-watch --no-progress --browsers=ChromeHeadlessCI

> [email protected] test C:\sampleapp\sampleapp-frontend
> ng test "--no-watch" "--no-progress" "--browsers=ChromeHeadlessCI"

12 09 2020 21:33:13.888:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:9876/
12 09 2020 21:33:13.892:INFO [launcher]: Launching browsers ChromeHeadlessCI with concurrency unlimited
12 09 2020 21:33:13.894:ERROR [launcher]: Cannot load browser "ChromeHeadlessCI": it is not registered! Perhaps you are missing some plugin?
12 09 2020 21:33:13.895:ERROR [karma-server]: Error: Found 1 load error
    at Server.<anonymous> (C:\sampleapp\sampleapp-frontend\node_modules\karma\lib\server.js:189:27)
    at Object.onceWrapper (events.js:420:28)
    at Server.emit (events.js:326:22)
    at emitListeningNT (net.js:1351:10)
    at processTicksAndRejections (internal/process/task_queues.js:79:21)
npm ERR! Test failed.  See above for more details.

How can I fix this issue with ChromeHeadlessCI?

Answer 1

Be sure to check that the following items are in karma.conf.js:

browsers: ['Chrome', 'ChromeHeadless', 'ChromeHeadlessCI'],
customLaunchers: {
  ChromeHeadlessCI: {
    base: 'ChromeHeadless',
    flags: ['--no-sandbox']
  }
},

This will help the launcher find ChromeHeadlessCI.