You might have already asked yourself “How do I properly test my Ionic application?” Well according to the Google test blog, they suggest you begin with a 70/20/10 split (70% unit tests, 20% integration test and 10% end-to-end tests). Now you might already have unit and integration tests, but how could you perform end-to-end tests on an Ionic application?
This article will show you how to setup protractor to execute end-to-end tests on an android device.

We will be using Appium with protractor to perform our E2E testing. Appium is an open source test automation framework for use with native, hybrid and mobile web apps. It drives iOS and Android apps using the WebDriver protocol.

The E2E tests itselves will be executed by Protractor. You might already be familiar with Protractor. This is an end-to-end testing framework for AngularJS applications.
This makes it perfectly suitable for testing Ionic applications. The following setup will be used for testing on real devices, although with some minor adjustments testing on an emulator should also be possible.


The first step will be installing Appium and its dependencies through NPM:

npm install -g appium  
npm install -g wd  

We also need to install protractor:

npm install -g protractor  

Now that we have installed all the dependencies, the next step is to prepare the Protractor config file. This will be similar to a normal config file, but some changes need to be made to allow us to test the webview of an android device. The full protractor config file will look like this:

exports.config = {  
    * normally protractor runs tests on localhost:4444, but we want protractor to connect to appium
    * which runs on localhost:4723
    seleniumAddress: 'http://localhost:4723/wd/hub',

    specs: ['./*_spec.js'],

    * Some capabilities must be set to make sure appium can connect to your device.
    * platformVersion: this is the version of android
    * deviceName: your actual device name
    * browserName: leave this empty, we want protractor to use the embedded webview
    * autoWebView: set this to true for hybrid applications
    * app: the location of the apk (must be absolute) 
    capabilities: {
        platformName: 'android',
        platformVersion: '5.0',
        deviceName: 'lg g3',
        browserName: "",
        autoWebview: true,
        app: '/absolutePathToApk'

    baseUrl: '',

    /* configuring wd in onPrepare
     * wdBridge helps to bridge wd driver with other selenium clients
     * See
    onPrepare: function () {
        var wd = require('wd'),
            protractor = require('protractor'),
            wdBridge = require('wd-bridge')(protractor, wd);

The next step will be to generate the APK as seen in the protractor config file.
This is done by the following command:

ionic build android  

Now the last step will be to run Appium, this should always be started before running Protractor,
we start it with following command:


Now with everything setup we will be able to perform tests on an actual android device!


An example project that contains the necessary configuration files and some example specs to get you started

Author image
Tom Buyse
My name is Tom Buyse. I work for Bewire in Belgium. My primary focus is front-end development, which currently mostly involves Angular, Angular 2 and Ionic.
comments powered by Disqus