Ionic 2 and Protractor


#1

Howdy!

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


#2

I found all the Cordova plugin temporary failure in ionic2.


#3

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)