E2E Testing with Protractor

[lathonez]

Angular 2 seed have a good set up we can hopefully borrow

[lathonez]

Looking at this now

[lathonez]

groundwork: fd563d5

[lathonez]

#50

[lathonez]

So since #50, all we need to do is:

• move app.e2e.js to typescript inside the source folder
• split app into separate files where appropriate
• compile above to js in gulp
• integrate with Travis

[mebibou]

FYI, if you add those lines in your protractor.conf.js, you don't need to do npm run webdriver-start anymore:

seleniumAddress: 'http://localhost:4444/wd/hub',
seleniumPort: 4444,
chromeDriver: '../node_modules/protractor/selenium/chromedriver'

[lathonez]

Thank you, will give it a go.

[mebibou]

Also, I don't know if you know ripple-emulator, but it allows you to run your app like an Android or iPhone app with some Cordova features (or writing your own bridges if you need more). Here's my full protractor.conf.js to give you an idea:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  seleniumPort: 4444,
  chromeDriver: '../node_modules/protractor/selenium/chromedriver',
  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);
  }
};

Although this used to be working before, since I updated to ionic2-beta.3 it doesn't work anymore 😞 (ripple doesn't want to load anymore I don't know why)

[lathonez]

I don't, again thank you. I have basically zero experience with Protractor and E2E testing generally, so this is a big learning curve for me and I appreciate the advice.

You don't have a public repo with this in by any chance?

[mebibou]

Ah sorry I don't for now, but I could probably do something simple when I find the time for it

[lathonez]

No worries. Hopefully I will be able to get your suggestions in this and they will help some other people.

[lathonez]

Removing webdriver-start works well, thank you very much.

c5d3a46

Also raised #52 for ripple when I get round to it.

[mebibou]

eheh nice

[lathonez]

https://travis-ci.org/lathonez/clicker/builds/116036958