CODEWITHSUNDEEP
karma-jasminegoogle-chrome-headlessangular-unit-test
Atul
Atul

Reputation: 1590

Headless Chrome Issue on Jenkins for Angular 6

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"
  }

Upvotes: 1

Views: 5513

Answers (1)

user2137230
user2137230

Reputation: 51

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...

Upvotes: 5

Related Questions