CHROME HEADLESS ON JENKINS

In an earlier post we saw how we could build an angular library with Jenkins. To keep the complexity to a minimum we didn’t run any tests in that build. Here we will run these tests inside Jenkins using Chrome Headless.

Jenkins build

First we update our Jenkins pipeline library to run tests. Here is how I did this building on my older posts. In vars/buildNpm.groovy add the following line to the scripts.

sh "npm run test"

Karma configuration

Next up is configuring karma to use Chrome Headless when running the tests. Also we will use some other reporters to report on the test results. To do so update the dependencies in package.json. Remove karma-jasmine-html-reporter and add karma-coverage and karma-mocha-reporter. For the result check github here.

Now for the karma configurarion. Remove projects/demo/karma.conf.js for we only want to run tests against our library code. After that, update the projects/lib/karma.conf.js to the following:

const os = require('os');
const chromeHeadlessSupported = os.platform() !== 'win32' || Number((os.release().match(/^(\d+)/) || ['0', '0'])[1]) >= 10;
module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-coverage-istanbul-reporter'),
      require('karma-coverage'),
      require('karma-mocha-reporter'),
      require('@angular-devkit/build-angular/plugins/karma')
    ],
    client: {
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, '../../coverage'),
      reports: ['html', 'lcovonly'],
      fixWebpackSourcePaths: true
    },
    reporters: ['mocha','coverage'],
    coverageReporter: {
      type: 'text-summary'
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browserNoActivityTimeout: 30000,
    browsers: [
      chromeHeadlessSupported ? 'ChromeHeadless' : 'Chrome'
    ],
    customLaunchers: {
      ChromeHeadless: {
          base: 'Chrome',
          flags: ['--no-sandbox', '--headless', '--disable-gpu', '--remote-debugging-port=9222']
      }
    },
    singleRun: true
  });
};

Note that we updated the reporters to the ones we just included. More importantly we checked on Chrome Headless support on the OS and configured this at the bottom under customLaunchers:.

Now run the build and we will see that the tests are run with Chrome Headless:

Hopefully you can now use Chrome headless on Jenkins to do your tests. Happy testing!