无法使用 chrome-headless 在 docker 中运行 angular-cli karma-tests

Question

我想用我的 Angular 项目进行多阶段 docker 构建，但现在我无法在 docker 容器内使用 chrome headless 运行我的 angular-cli karma 测试。

直接在 Win10 上进行 ng test，它可以在相同的配置下很好地工作。所以我想这与我在Win10上构建docker容器的方式有关：

有人可以帮忙吗？

错误日志

01 08 2019 12:16:38.075:INFO [karma]: Karma v2.0.5 server started at http://0.0.0.0:9876/

01 08 2019 12:16:38.094:INFO [launcher]: Launching browser ChromeHeadlessNoSandbox with unlimited concurrency

01 08 2019 12:16:38.191:INFO [launcher]: Starting browser ChromeHeadless

01 08 2019 12:17:10.292:ERROR [launcher]: Cannot start ChromeHeadless
[0801/121638.876069:ERROR:gpu_process_transport_factory.cc(980)] Lost UI shared context.

DevTools listening on ws://127.0.0.1:9222/devtools/browser/d3145ee9-9706-45e3-a745-db274ba42c24

Dockerfile

FROM node:10.16.0-stretch AS build

ARG CHROMIUM=70.0.3538.110-1~deb9u1
ARG FIREFOX=60.6.1esr-1~deb9u1

ENV YARN_VERSION 1.16.0
RUN curl -fSLO --compressed "https://yarnpkg.com/downloads/$YARN_VERSION/yarn-v$YARN_VERSION.tar.gz" \
&& tar -xzf yarn-v$YARN_VERSION.tar.gz -C /opt/ \
&& ln -snf /opt/yarn-v$YARN_VERSION/bin/yarn /usr/local/bin/yarn \
&& ln -snf /opt/yarn-v$YARN_VERSION/bin/yarnpkg /usr/local/bin/yarnpkg \
&& rm yarn-v$YARN_VERSION.tar.gz

RUN \
  apt-get update && apt-get install -y --no-install-recommends \
chromium=${CHROMIUM} firefox-esr=${FIREFOX} \
git tar gzip ca-certificates \
bash curl make \
  && rm -rf  /var/lib/apt/lists/* /tmp/*

ENV \
  PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
  CHROME_BIN=/usr/bin/chromium \
  FIREFOX_BIN=/usr/bin/firefox

COPY ./package*.json /usr/angular-workdir/
WORKDIR /usr/angular-workdir
RUN npm run npm:install

COPY ./ /usr/angular-workdir
RUN npm run test

karma.conf.js

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    angularCli: {
      environment: 'dev'
    },
    browsers: ['ChromeHeadlessNoSandbox'],
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: 'ChromeHeadless',
        flags: [
          '--headless',
          '--disable-gpu',
          '--no-sandbox',
          '--disable-software-rasterizer',
          '--disable-dev-shm-usage'
        ]
      }
    },
    port: 9876,
    captureTimeout: 50000,
    browserDisconnectTolerance: 1,
    browserDisconnectTimeout : 50000,
    browserNoActivityTimeout : 60000,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: false,
    singleRun: true
  });
};

Answer 1

我在 Linux 容器中也遇到了类似的问题。我通过使用 ChromeHeadless 解决了这个问题。

以下是用于量角器测试容器的 chrome 命令。将这些行添加到您的 Dockerfile 中。

RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable

如果您使用的是 Windows，则可以使用 PowerShell 命令。

在 karma.config.js 中添加此块：

browsers: ['ChromeHeadless'],
    customLaunchers: {
      'ChromeHeadless': {
        base: 'Chrome',
        flags: [
          '--no-sandbox',
          '--headless',
          '--disable-gpu',
          '--remote-debugging-port=9222'
        ]
      }
    }

在 protractor.config.js 中添加此块：

capabilities: {
    'browserName': 'chrome',
    'chromeOptions': {
      'args': [
        '--no-sandbox',
        '--headless',
        '--window-size=1024,768'
      ]
    }
  }

这些更改运行后ng test --watch=false