如何解决Github Action中的ChromeHeadlessCI无法运行角度测试

我引导了一个简单的Angular（v10.1）应用程序，并如下创建了Github动作工作流。请注意，我已将测试配置为以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

测试失败，错误为Cannot load browser "ChromeHeadlessCI": it is not registered! Perhaps you are missing some plugin?。即使我尝试在本地计算机上运行npm test -- --no-watch --no-progress --browsers=ChromeHeadlessCI，也会引发相同的错误。

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

> sampleapp-frontend@0.0.0 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.

如何使用ChromeHeadlessCI解决此问题？

解决方法

以上答案对我来说似乎不完整。这是一个工作示例：

1。安装依赖

我们使用 puppeteer 来调用和管理 headless-chrome 实例。我们还安装了 karma-chrome-launcher 来为 Karma 提供插件。

运行 npm i -D puppeteer karma-chrome-launcher 以安装两者。

2.配置业力

还有三行代码，我们准备好了。

我们通过 puppeteer 将一个 headless-chrome 实例传递给系统：

process.env.CHROME_BIN = require('puppeteer').executablePath()

导入已安装的 Karma 插件

require('karma-chrome-launcher')]

最后，将 ChromeHeadless 添加到可用浏览器列表中：

browsers: ['ChromeHeadless','Firefox']

karma.conf.js 现在的样子：

// karma.conf.js
process.env.CHROME_BIN = require('puppeteer').executablePath() // IMPORTANT!

module.exports = function(config) {
  config.set({
    browsers: ['ChromeHeadless','Firefox'],// IMPORTANT! You can list & use multiple browsers
    plugins: [
        require('karma-jasmine'),require('karma-chrome-launcher')],// IMPORTANT!
        require('karma-firefox-launcher'),...
    ],...
  })
}

3.执行！

执行 ng test --watch=false --browsers=ChromeHeadless 并享受您的测试！我在 package.json 中添加了一个别名，我在 GitHub 操作中通过 npm run test-headless 调用该别名。

"scripts": {
    ...,"test-headless": "ng test --watch=false --browsers=ChromeHeadless",...

在桌面上时，我通过 ng test --browsers=Firefox 使用 Firefox。

来源：

https://github.com/karma-runner/karma-chrome-launcher
https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai（有关 puppeteer 的更深入信息）

您没有提及对karma.conf.js的任何修改，您应该在此添加：

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

https://angular.io/guide/testing#configure-cli-for-ci-testing-in-chrome

如果这还不够，您可能必须在测试环境中安装铬/铬。

确保检查karma.conf.js中是否包含以下项目：

dd.read_json("data.json",meta=meta,blocksize=None,orient="records",lines=False)

这将帮助启动器找到ChromeHeadlessCI。

Github Action中的ChromeHeadlessCI无法运行角度测试