"ChromeHeadless have not captured in 60000 ms, killing." occuring only in Gitlab hosted CI/CD pipeline

Question

When running a CI/CD pipeline on Gitlab, my Karma tests are timing out with the error:

ℹ ｢wdm｣: Compiled successfully.
05 08 2019 22:25:31.483:INFO [karma-server]: Karma v4.2.0 server started at http://0.0.0.0:9222/
05 08 2019 22:25:31.485:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency 1
05 08 2019 22:25:31.488:INFO [launcher]: Starting browser ChromeHeadless
05 08 2019 22:26:31.506:WARN [launcher]: ChromeHeadless have not captured in 60000 ms, killing.
05 08 2019 22:26:31.529:INFO [launcher]: Trying to start ChromeHeadless again (1/2).
05 08 2019 22:27:31.580:WARN [launcher]: ChromeHeadless have not captured in 60000 ms, killing.
05 08 2019 22:27:31.600:INFO [launcher]: Trying to start ChromeHeadless again (2/2).
05 08 2019 22:28:31.659:WARN [launcher]: ChromeHeadless have not captured in 60000 ms, killing.
05 08 2019 22:28:31.689:ERROR [launcher]: ChromeHeadless failed 2 times (timeout). Giving up.



npm ERR! Test failed.  See above for more details.

This problem does not occur when running tests locally, and it does not occur when running the tests using the same Docker image with Gitlab Runner locally.

I feel like I have tried every possible configuration with karma.conf.js. I have Googled this issue relentlessly and have tried every suggestion from proxy servers, to environment variables, to flags... but alas, no luck. I have tried multiple Docker images as this was initially failing on local Gitlab Runner but I have found that the Docker image selenium/standalone-chrome:latest works fine in local Gitlab Runner.

Here is my karma.conf.js file:

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

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    frameworks: [ 'jasmine' ],

    // list of files / patterns to load in the browser
    files: [
      'src/**/*.spec.js'
    ],

    // list of files / patterns to exclude
    exclude: [],

    // preprocess matching files before serving them to the browser
    preprocessors: {
      'src/**/*.spec.js': [ 'webpack' ]
    },

    webpack: {
      // webpack configuration
      mode: 'development',
      module: {
        rules: [
          {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
              presets: ['env']
            }
          }
        ]
      },
      stats: {
        colors: true
      }
    },


    // test results reporter to use
    reporters: [ 'spec' ],

    // web server port
    port: 9222,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // plugins for karma
    plugins: [
      'karma-chrome-launcher',
      'karma-webpack',
      'karma-jasmine',
      'karma-spec-reporter'
    ],

    // start these browsers
    browsers: ['ChromeHeadlessNoSandbox'],
    customLaunchers: {
      ChromeHeadlessNoSandbox: {
        base: 'ChromeHeadless',
        flags: [
          '--headless',
          '--no-sandbox',
          '--disable-gpu'
        ]
      }
    },
    captureTimeout: 60000,
    browserDisconnectTolerance: 5,
    browserDisconnectTimeout : 30000,
    browserNoActivityTimeout : 30000,

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: 1
  })
}

And here is my .gitlab-ci.yml file:

.prereq_scripts: &prereq_scripts |
  sudo apt -y update && sudo curl -sL https://deb.nodesource.com/setup_10.x | sudo bash && sudo apt -y install nodejs

image: 'selenium/standalone-chrome:latest'

stages:
- test

test:
  stage: test
  script:
  - *prereq_scripts
  - npm install
  - npm test

I am expecting the tests to run successfully in all three instances (local npm, local Gitlab Runner and remote Gitlab CI/CD pipeline). Currently it only runs in successfully in the first two.

Answer 1

In your karma.conf.js file you need to declare the CHROME_BIN variable inside the module.exports function:

module.exports = function(config) {

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

    config.set({
    ...

Answer 2

Docker image with chromeheadless

for example, use a docker image of angular/ngcontainer with chrome headless for testing UI apps.

  image: 'angular/ngcontainer:latest'

Also, I created one docker image with the latest chrome

  image: 'anulals/angular'

https://hub.docker.com/r/angular/ngcontainer

https://hub.docker.com/r/anulals/angular