Headless Chrome Issue on Jenkins for Angular 6 - karma-jasmine

Question

I am running Angular 6 unit tests using Karma and below is my configuration :
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')
],
customLaunchers: {
CustomHeadlessChrome: {
base: "ChromeHeadless",
flags: [
"--headless",
"--disable-gpu",
"--disable-web-security",
"--disable-site-isolation-trials",
"--remote-debugging-port-9222",
"--no-sandbox"
]
}
},
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: true
});
};
While running tests , I am getting below errors as -
[Cannot load browser "CustomHeadlessChrome": it is not registered! Perhaps you are missing some plugin?
After searching on public forums , I came across below resource which states this is a dependency issue -
Cannot load browser "ChromeHeadless": it is not registered!
So I changed dependency version of karma-chrome-launcher to 2.2.0 .
But issue still persists.
I also tried to upgrade karma related dependencies but issue still persists.
Can anybody please help here ?
Below is my devDependencies section in package.json :
"devDependencies": {
"#angular-devkit/build-angular": "^0.11.2",
"#angular/cli": "^6.0.3",
"#angular/compiler-cli": "^6.0.3",
"#angular/language-service": "^6.0.3",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/jquery": "^3.3.0",
"#types/node": "^6.0.101",
"codelyzer": "^4.1.0",
"jasmine-core": "^2.6.4",
"jasmine-spec-reporter": "~4.1.0",
"karma": "^1.7.1",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.4.3",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.1",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "^2.7.2"
}

Answer 1

In the karma.conf.js located in your main directory of your Angular project edit the file and change the line:
browsers: ['Chrome'],
to
browsers: ["ChromeHeadlessNoSandbox"],
In addition to the "browsers" configuration in karma.conf.js, it is necessary to have the "customLaunchers" configuration with the minimum configuration shown below:
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: "ChromeHeadless",
flags: ["--no-sandbox"]
}
},
For me this solution worked fine...