One of the perks of using Ionic for both the mobile and web/PWA versions of the app is being able to use the Angular test tooling, and 3rd party libraries such as Karma, for unit and integration testing.

A good test suite gives you the confidence to roll out new features and make changes without introducing regressions. Browser based testing won’t cover every use case, such as native plugins and the occasional difference between mobile browsers and the test environment, but it will still cut down on the amount of manual testing required significantly.

Android 5, which brought the evergreen system browser, has helped reduce the gap between the desktop chrome and the Android browser used in Cordova/Ionic apps. When running tests in development on the Desktop it was possible to use Chrome as the test runner, but in continuous integration builds it was neccassary to use the PhantonJS runtime.

While PhantomJS was useful it was also yet another browser implementation with its own differences. The release of Chrome 59 with a native, cross-platform headless mode negated the need for PhantomJS. And with this came the annoucement by Vitaly Slobodin, PhantomJS’s lead developer, on Twitter:

"This is the end - #phantomjs 2.5 will not be released. Sorry, guys!"

Cloneder, and the soon to come Lattice, come with integration to the gitlab.com continuous integration build service, and automatically selects the browser configuration for the test suite depending on if its is running as a continuous integration build or not.

The CI test build has been updated to use a Chrome headless configuration, and as before a regular Chrome instance when running in development.

There were only a few small changes required, a key one being using a docker image in the gitlab.com CI configuration which has the required binaries. Not only does Chrome need to be installed in the docker image, but also xvfb which provides a virtualized framebuffer, and a few more additional packages which you can see here.

In short the changes were:

• Remove the PhantomJS plugins from package.json and the karma.conf.js configuration
• Add the Chrome headless configuration to karma.conf.js and use it when running CI build
• Update the .gitlab-ci.yml configuration to use the codeclou/docker-nodejs-chrome-xvfb docker image for the stages which run the tests

Depending on the complexity of your test the difference between PhantomJS and Chrome may cause some issues in your test suite. GitLab has a great article which covers the various code changes required to update their test suite to Chrome headless.

Happy testing!