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

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

Currently, Puppeteer has an issue with Karma on Linux machines, see GitHub issue
There are plenty of solutions on how to make it works without Puppeteer if you use it just to install Headless Chromium.
I have installed it on my Jenkins Alpine machine using only two bash lines:
apk add chromium
export CHROME_BIN=/usr/bin/chromium-browser
Alternatively, you can use Docker with the same setup. One of the examples is here

Answer 3

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