E2E Testing with Protractor on BrowserStack

Previously, I have written one more post about this subject. But that is about initialise an E2E test with just one example spec file.

I will write about the followings in this post;

1. How to run multi browsers
2. How to run on BrowserStack
3. How to export test result for TeamCity

1. How to run multi browsers

We have to use multiCapabilities keyword instead of capabilities in our protractor config for running multi browsers. But how?

1
2
3
4
5
6
7
8
multiCapabilities: [
  {
    'browserName': 'chrome'
  },
  {
    'browserName': 'firefox'
  }
]

I mean the config file will be like that;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
exports.config = {
  directConnect: true,
  multiCapabilities: [
    {
      'browserName': 'chrome'
    },
    {
      'browserName': 'firefox'
    }
  ],
  framework: 'jasmine',
  specs: ['spec.js'],
  jasmineNodeOpts: {
    defaultTimeoutInterval: 30000
  }
};

We can use these keywords as a browserName; android, chrome, firefox, htmlunit, internet explorer, iPhone, iPad, opera, or safari.

2. How to run on BrowserStack

It isn’t as hard as it seems. We need to add just three more keys in config. browserstack.user  and browserstack.key into every capability and seleniumAddress into config. It’s enough for running tests on BrowserStack. I need to inform that. We have advanced environment when we use BrowserStack for this job. So don’t restrict ourself. We can use different OS (with as any version as possible), browser version, and device! This list can be seen at here. By the way, BrowserStack’s seleniumAddress  is http://hub.browserstack.com/wd/hub.

There is a wizard for making os, browser, and resolution combination at here. And you can find detailed configs for BrowserStack at here.

3. How to export test result for TeamCity

There is a npm package named jasmine-reporters. I use this package for exporting test results. This package contains several different reporters. But I use TeamCity reporter. Because we use TeamCity on the project for CI.

First, we have to install this package with npm install jasmine-reporters –save. Then, we can use it in onPrepare function in config. This function runs before tests run. Thus, we can add our new reporter into protractor. We need to add these lines into config for this.

1
2
3
4
onPrepare: function() {
  var jasmineReporters = require('jasmine-reporters');
  jasmine.getEnv().addReporter(new jasmineReporters.TeamCityReporter());
}

Then, TeamCity will automatically catch this test results. And it will show that results on every build’s page.

Finally

We can run tests on BrowserStack and export results for TeamCity.

Maybe I continue to write within this post. Or I write another post about testing.