My Profile Photo

Lathonez' Blog

• on ionic2 angular2 testing
Fork me on GitHub

End to End testing an Ionic2 project

Updated for Ionic 3.9.2 and Angular 5.0.3

TL;DR - I have an Ionic 2 project on github set up for E2E testing with protractor, dive in, or read on.

The previous post in this series on Unit Testing does a bit of intro that I won’t repeat here. For the purposes of this post, it’ll be useful to have the demo app cloned locally.

Install dev dependencies

npm install --save-dev angular-cli @angular/router connect jasmine-reporters jasmine-spec-reporter protractor serve-static ts-node

Install config files and boilerplate

Into your project’s root:

Into a newly created ./e2e folder in your project’s root:

For the lazy:

for file in angular-cli.json protractor.conf.js tsconfig.ng-cli.json
do
  wget https://raw.githubusercontent.com/lathonez/clicker/master/${file}
done

mkdir e2e
cd e2e

for file in tsconfig.e2e.json
do
  wget https://raw.githubusercontent.com/lathonez/clicker/master/e2e/${file}
done

Modify existing Ionic config files:

Add jasmine types in Ionic’s tsconfig.json (only necessary on Windows):

    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
     "jasmine"
    ]

Add the following to your gitignore file:

# e2e
/e2e/*.js
/e2e/*.map

Hook ng e2e into your package.json scripts array:

  "scripts": {
    "e2e": "ionic-app-scripts build && protractor",
    "postinstall": "webdriver-manager update"
  },

A simple e2e test on app.ts

Create a simple e2e test file ./e2e/app.e2e-spec.ts to get us going:

import { browser, element, by } from 'protractor';

describe('MyApp', () => {

  beforeEach(() => {
    browser.get('');
  });

  it('should have a title', () => {
    expect(browser.getTitle()).toEqual('MyApp');
  });
})

Update the webdriver

As we hooked webdriver-manager update into our npm postinstall script, we just need to run npm install. Thus this step is covered by simply installing your project (in the future):

x220:~/code/myApp$ npm install

...

> ionic-hello-world@ postinstall /home/lathonez/code/myApp
> webdriver-manager update

...

[16:38:03] I/update - chromedriver: setting permissions to 0755 for /home/lathonez/code/myApp/node_modules/protractor/node_modules/webdriver-manager/selenium/chromedriver_2.25

Running the tests

As we hooked into our package.json above, we can run the tests with a simple npm run e2e.

x220:~/code/myApp$ npm run e2e
(node:31496) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.

> ionic-hello-world@ e2e /home/lathonez/code/myApp
> protractor

[16:40:33] I/direct - Using ChromeDriver directly...
[16:40:33] I/launcher - Running 1 instances of WebDriver
Started
Spec started
.
  MyApp
    ✓ should have a title

1 spec, 0 failures
Finished in 1.631 seconds

Executed 1 of 1 spec SUCCESS in 2 secs.
[16:40:36] I/launcher - 0 instance(s) of WebDriver still running
[16:40:36] I/launcher - chrome #01 passed

Using Docker?

Testing on docker (or any other headless environment), requires the use of xvfb, a virtual frame buffer implementing the X11 protocol.

apt-get install xvfb

Change the e2e line in package.json to include xvfb-run, ensuring protractor has access to the virtual display:

  "scripts": {
    "e2e": "xvfb-run && ionic-app-scripts build && protractor",
    ...
  }

For more information see issue #144

Contribute

Clickers is a work in progress. If you’d like to help out or have any suggestions, check the roadmap sticky.

This blog is on github, if you can improve it, have any suggestions or I’ve failed to keep it up to date, raise an issue or a PR.

Help!

If you can’t get any of this working in your own project, raise an issue and I’ll do my best to help out.

If you have a general question about e2e testing concepts (e.g. how can I write an e2e test for some-module), see our General Testing Help thread.

Say “Thanks”

If the clicker project helped you out, show it some love by giving it a star on github <3: