Ionic 2 and Protractor

Howdy!

I’m looking for an example to use Protractor with Ionic 2, has anyone done this already?

I found all the Cordova plugin temporary failure in ionic2.

I’m currently doing it, and managed to have something working, but I’m now trying to figure out how to sequence the tests, knowing that on ionic2 we can’t simply load a url and then do some test on the page, I guess we have to navigate to the pages every time?

The setup:

  • npm install --save-dev protractor

  • install the webdriver: webdriver-manager update

  • npm install -g ripple-emulator

  • run the ripple emulator: ripple emulator

  • create a protractor.config.js with the following content:

    exports.config = {
    seleniumAddress: ‘http://localhost:4444/wd/hub’,
    seleniumPort: 4444,
    directConnect: true,
    framework: ‘jasmine2’,
    baseUrl: ‘http://localhost:8100’,
    capabilities: {
    browserName: ‘chrome’,
    chromeOptions: {
    args: [’–disable-web-security’]
    }
    },
    specs: [
    ‘protractor/**/*.js’
    ],
    jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30 * 1000,
    isVerbose: true
    },
    onPrepare: function() {
    // Use ripple emulator to run the tests
    var url = ‘http://localhost:4400/?enableripple=cordova-3.0.0-’ + browser.params.device;
    browser.driver.manage().window().maximize();
    browser.ignoreSynchronization = true;
    browser.driver.get(url);
    // Allow ripple to load
    browser.driver.wait(function() {
    return browser.driver.getCurrentUrl().then(function(actualUrl) {
    return url == actualUrl;
    });
    }, 10000, ‘url hasnt changed’);
    browser.driver.wait(function() {
    return element(by.id(‘document’)).isPresent();
    }, 10000, ‘ripple not loaded’);
    browser.driver.switchTo().frame(0);
    }
    };

  • create some test under the specs folder provided in the config

  • finally run the tests and provide a device as param (testing on different device made easy :slightly_smiling:): protractor protractor.conf.js --params.device=iPhone5

Note: if you have a window that appears when running the ripple emulator, because of some cordova plugin that you haven’t installed, then you need to mock the plugin (you can do like in http://www.badpenguin.org/ionic-keyboard-ripple-emulator)