ChromeHeadless running with docker

Getting a timeout error when running ChromeHeadless with karma inside a docker container. This is an Angular cli project with angular 6 with karma 3.0. We run Karma through a makefile script that uses docker-compose. Here’s the Karma config file.

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function(config) {
  var host = process.env.HOST_IP || process.env.HOSTNAME;

  config.set({
    basePath: '',
    mime: {
      "text/x-typescript": ["ts", "tsx"]
    },
    frameworks: ['parallel', 'jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-junit-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
      require('karma-parallel')
    ],
    parallelOptions: {
      executors: Math.ceil(require('os').cpus().length / 2),
      shardStrategy: 'round-robin'
    },
    client: {
      jasmine: {
        random: false // Don't run tests in random order
      }
    },
    customLaunchers: {
      Chrome_no_sandbox: {
        base: 'Chrome',
        flags: [
          '--headless',
          '--disable-web-security',
          '--disable-gpu',
          // Without a remote debugging port, Google Chrome exits immediately.
          '--remote-debugging-port=xxxx',
          '--remote-debugging-address=xxx.x.x.x'
        ]
      }
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'),
      reports: ['html', 'lcovonly', 'cobertura'],
      fixWebpackSourcePaths: true
    },
    // the default configuration
    junitReporter: {
      outputDir: './test-results', // results will be saved as $outputDir/$browserName.xml
      outputFile: 'test-results.xml', // if included, results will be saved as $outputDir/$browserName/$outputFile
      suite: '', // suite will become the package name attribute in xml testsuite element
      useBrowserName: false, // add browser name to report and classes names
      nameFormatter: undefined, // function (browser, result) to customize the name attribute in xml testcase element
      classNameFormatter: undefined, // function (browser, result) to customize the classname attribute in xml testcase element
      properties: {} // key value pair of properties to add to the <properties> section of the report
    },
    reporters:
      config.buildWebpack &&
      config.buildWebpack.options &&
      config.buildWebpack.options.codeCoverage
        ? ['progress', 'coverage-istanbul', 'junit']
        : ['progress', 'kjhtml'],
    hostname: host,
    port: process.env.KARMA_PORT,
    colors: true,
    logLevel: config.LOG_DEBUG,
    autoWatch: true,
    browsers: ['ChromeHeadless'],
    singleRun: false,
    captureTimeout: 100000,
    browserDisconnectTimeout: 10000,
    browserDisconnectTolerance: 1,
    browserNoActivityTimeout: 100000
  });
};

[rmngrc]

I think your issue is that what you have in the browsers option (ChromeHeadless) doesn’t match with what you have in customLaunchers (Chrome_no_sandbox).

Have set it up mine this way and works for me:

Dockerfile:

FROM node:11.0-alpine

# Installs latest Chromium package
RUN apk update && apk upgrade && \
    echo @edge http://nl.alpinelinux.org/alpine/edge/community >> /etc/apk/repositories && \
    echo @edge http://nl.alpinelinux.org/alpine/edge/main >> /etc/apk/repositories && \
    apk add --no-cache bash chromium@edge nss@edge

# This line is to tell karma-chrome-launcher where
# chromium was downloaded and installed to.
ENV CHROME_BIN /usr/bin/chromium-browser

# Tell Puppeteer to skip installing Chrome.
# We'll be using the installed package instead.
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true

# Telling node-sass which pre-built binary to fetch.
# This way we don't need rebuilding node-sass each time!
ENV SASS_BINARY_NAME=linux-x64-67

# ...

Then in karma.conf.js:

browsers : ['ChromeHeadlessCustom'],
customLaunchers: {
  ChromeHeadlessCustom: {
    base: 'ChromeHeadless',
    flags: ['--no-sandbox']
  }
},
frameworks: [
  'jasmine',
],
plugins : [
  'karma-chrome-launcher',
  'karma-jasmine',
  // ...
],

[Krinkle]

It seems the main missing part in the configuration is --no-sandbox. This flag is required when using Chrome inside Docker. See also https://github.com/karma-runner/karma-chrome-launcher/issues/158 and https://docs.travis-ci.com/user/chrome#sandboxing.