Sharing Top Content from the Angular-sphere.

[How-to] Running Angular tests on continuous integration servers

  • [How-to] Running Angular tests on continuous integration serversSo you have written dozens of tests that validate the behavior of your Angular application.
  • You run ng test on your machine and everything works great.The next step is to make those tests run on your continuous integration server, which is when you realize that you can’t run an actual browser on that server because:It’s a Linux OS with no GUIYou don’t have any way…
  • That feature is called Headless Chrome.Here is how you can make it run with a simple tweak in karma.conf.js (assuming you’re using Angular CLI):customLaunchers: { ChromeHeadless: { base: ‘Chrome’, flags: [ ‘–headless’, ‘–disable-gpu’, ‘–no-sandbox’, ] }},browsers: [‘ChromeHeadless’],singleRun: trueWhat we do here is define a new custom launcher called ChromeHeadless.
  • It’s just a regular Google Chrome with some extra options as specified above.Note that I also changed singleRun to true so that the tests run only once.
  • I know because that’s obviously what happened to me on my initial attempt!Option #2: Run PhantomJSAnother option is to get rid of any browser run entirely and have PhantomJS do the job.This requires to add PhantomJS to the devDependencies of your package.json as highlighted below, then run npm “^1.0.4″Then you…

So you have written dozens of tests that validate the behavior of your Angular application. You run ng test on your machine and everything works great. The next step is to make those tests run on…

So you have written dozens of tests that validate the behavior of your Angular application. You run ng test on your machine and everything works great.

The next step is to make those tests run on your continuous integration server, which is when you realize that you can’t run an actual browser on that server because:

This happened to me a few weeks ago, and it is a very common thing with continuous integration servers: It’s unlikely that they have a GUI.

The solution is simple: Make our tests run without an actual browser window!

Option #1: Run Headless Chrome

That option did not work for me on a Linux-based Jenkins server, but might still be valuable if you want to run your tests without the visual pollution of a blinking browser window.

Since Chrome 59, it is possible to run it without the actual browser window. That feature is called Headless Chrome.

Here is how you can make it run with a simple tweak in karma.conf.js (assuming you’re using Angular CLI):

customLaunchers: {

base: ‘Chrome’,

flags: [

‘–headless’,

‘–disable-gpu’,

‘–no-sandbox’,

‘–remote-debugging-port=9222’,

browsers: [‘ChromeHeadless’],

singleRun: true

What we do here is define a new custom launcher called ChromeHeadless. It’s just a regular Google Chrome with some extra options as specified above.

Note that I also…

[How-to] Running Angular tests on continuous integration servers