1

I do have an angular Application where I also run a test ng test --sm=false. It works fine and I get the result in Chrome Browser.

The issue is to be able to run a headless test because the App will be loaded on a Git-Repo which is connected to Docker container etc.

How can I get a headless-browser test setup and how would this exactly work? I did a couple of search and the most of the results are talking about phantomjs-prebuilt karma-phantomjs-launcher.

I'am not sure if this is the only best approach. And also the following gitHub Repo provides a bunch of HeadlessBrowsers.

Here is the changed karma.conf.ts code:

module.exports = function (config) {
config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
        require('karma-jasmine'),
        require('karma-chrome-launcher'),
        require('karma-jasmine-html-reporter'),
        require('karma-coverage-istanbul-reporter'),
        require('@angular/cli/plugins/karma')
    ],
    ChromeHeadless:{
        base: 'Chrome', flags: [ '--headless', '--disable-gpu',  '--remote-debugging-port=9222' ]
    },
    client:{
        clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    coverageIstanbulReporter: {
        reports: [ 'html', 'lcovonly' ],
        fixWebpackSourcePaths: true
    },
    angularCli: {
        environment: 'dev'
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadless'],
    singleRun: false
});
};
3

You just ask karma to run Chrome headless. It's no longer necessary to create it out of ChromeOptions

Here are the first few lines from my karma.conf.js

module.exports = function (config) {
    config.set({
        browsers: ['ChromeHeadless'], // Chrome ChromeHeadless
        ....

You get this with the karma-chrome-launcher, which it sounds like you already have.

Obviously, if you have something more special, feel free to do this:

module.exports = function(config) {
  config.set({
    browsers: ['Chrome_rtl_for_some_reason'],

    customLaunchers: {
      Chrome_rtl_for_some_reason: {
        base: 'Chrome',
        flags: ['--rtl']
      }
    }
  });
};
  • Yes, it works too.. but what's annoying me is that an instance of the Chrome still starts and runs in the background even it can't be launched. Any idea? Or is it the correct behavior in this case? would this be cause any issues on the production Repo? – k.vincent Oct 20 '17 at 9:21
  • Headless chrome is still chrome. So I'd expect chrome to be running. Not sure what you're trying to say. – Nathan Cooper Oct 20 '17 at 9:26
  • Let's make it clearer... the Chrome instance starts anyway - of course. In other words Chrome "Icon" is then launched/visible in the Dock. Is this clear? – k.vincent Oct 20 '17 at 9:30
3

Angular has some great tooling for running tests, namely Karma and Protractor. By default (at least when using Angular CLI) they run using Chrome. So when you execute the tests from command-line, it will pop open a browser window where the tests execute. This works well enough, but sometimes you either don’t want to see that browser window pop open or you are running the tests in an environment where there is no graphical environment (on a CI server or a Docker container for example).

There is nothing new in running Karma tests without a browser window, you have been able to do it with PhantomJS by installing the karma-phantomjs-launcher. PhantomJS has been good enough solution for this, but you might encounter some issues every now and then and need to add some additional polyfills etc. But Chrome now has the ability to run in headless mode since version 59, so you can use it to run tests without needing to install any additional packages and with a more standard environment.

Conf your Karma Whether you have a Karma config generated with Angular CLI or one that you have created manually, you can use a config option called customLaunchers to create a new launcher based on an existing one by defining additional flags for it. This works equally with older AngularJS v1.x projects as well as newer Angular v2.x-4.x projects. To use Chrome in headless mode, you need to add the following section to your karma.conf.js

customLaunchers: {
  ChromeHeadless: {
    base: 'Chrome',
    flags: [
      '--headless',
      '--disable-gpu',
      // Without a remote debugging port, Google Chrome exits immediately.
      '--remote-debugging-port=9222',
    ],
  }
}

Note, depending on your Chrome version, the --disable-gpu flag might not be needed.

Then you can replace whatever you had in the browsers section (either ‘Chrome’ or ‘PhantomJS’ etc.) with ChromeHeadless. That’s it, after that you can enjoy running your tests without any browser window popping up.

E2E tests with Protractor Running E2E tests in headless mode has been a bit more difficult, since it has not worked very nicely with PhantomJS. Basically your only option has been to run Chrome in Xvfb (that’s X virtual framebuffer in case you were wondering). But now it’s as simple as adding a few lines to your protractor.conf.js to also run your E2E tests in headless mode. You need to add the following options under the capabilities key (where you should already have browserName: 'chrome'):

chromeOptions: {
  args: [ "--headless", "--disable-gpu", "--window-size=800x600" ]
}

See this Gist for full examples of both karma.conf.js and protractor.conf.js (both files generated by Angular CLI with only the changes described above).

  • Ok, sounds good. I did the changes. Just one thing... the browser doesn't popup, but it starts and a kind of runs in background. When I click on it, it doesn't show up. Is it correct like this or did I miss something? won't this behavior be an issue on the production environment (GitLab Repo and Docker)? I'll add the code of karma.conf.ts in my question to make sure I did it as expected. The code would be too long for this comment area. – k.vincent Oct 20 '17 at 7:50
  • Saif, this appears to be plagarised content. Could you please revise this to instead summarize and link back for credit? Thank you! – corsiKa Apr 10 '18 at 19:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.