Running Protractor tests on Browserstack Automate

Question

I'm developing an AngularJS app and want to do end-2-end testing with Protractor. I would like to benefit from the suite of test browsers available at Browserstack and run the tests on Browserstack Automate instead of a local Selenium server.

How do I set up a system to run these tests?

Answer 1

Protractor from version 3.0.0 onwards has added inbuilt support for BrowserStack.

You simply need to add the following two parameters in your conf.js to launch the test on BrowserStack:

browserstackUser: '<username>'
browserstackKey: '<automate-key>'

Your username and automate key can be found here, after you have logged in to your account.

Hence, lets say you wish to run your test on Chrome 50 / OS X Yosemite, your conf.js should look something like this:

exports.config = {
  specs: ['spec.js'],

  browserstackUser: '<username>',
  browserstackKey: '<automate-key>',

  capabilities: {
    browserName: 'Chrome',
    browser_version: '50.0',
    os: 'OS X',
    os_version: 'Yosemite'
  },    
};

If you wish to run tests in parallel on different browser and OS combinations, you can use the multiCapabilities as given below:

exports.config = {
  specs: ['spec.js'],

  browserstackUser: '<username>',
  browserstackKey: '<automate-key>',

  multiCapabilities: [
    {
        browserName: 'Safari',
        browser_version: '8.0',
        os: 'OS X',
        os_version: 'Yosemite'
    },
    {
       browserName: 'Firefox',
       browser_version: '30.0',
       os: 'Windows',
       os_version: '7'
    },
    {
       browserName: 'iPhone',
       platform: 'MAC',
       device: 'iPhone 5S'
    }
  ]
};

Some helpful links:

1. Code Generator - Helps you configure the capabilities to test on different various browser and OS combinations especially mobile devices.

2. Sample Github project for Protractor-BrowserStack - This should help you get started.

Answer 2

NOTE: These instructions are only relevant for Protractor versions older than v3.0. Protractor 3.0 includes built-in support for Browserstack.

---

Prerequisites

You will need to have node and npm installed. Check your node version with node --version to ensure it is greater than v0.10.0.

Ready?

1. Install Protractor

Use npm to install Protractor globally with:

npm install -g protractor

If you get errors, you might need to run the above command as sudo.

Here's a more detailed tutorial for installing and using Protractor.

2. Install Browserstack Selenium web driver

EDIT: @elgalu pointed out in the comments this step is not necessary. Apparently the BrowserStackLocal tunnel (set up in step 4) is enough.

Following Browserstack's instructions for setting up node.js, install the seleniun web driver:

npm install -g browserstack-webdriver

3. Set up Protractor configuration

Create a protractor.conf.js file (see documentation for BrowserStack's supported capabilities):

exports.config = {
  capabilities: {
    'browserstack.user' : 'my_user_name',
    'browserstack.key' : 'my_secret_key',

    // Needed for testing localhost
    'browserstack.local' : 'true',

    // Settings for the browser you want to test
    // (check docs for difference between `browser` and `browserName`
    'browser' : 'Chrome',
    'browser_version' : '36.0',
    'os' : 'OS X',
    'os_version' : 'Mavericks',
    'resolution' : '1024x768'
  },

  // Browserstack's selenium server address
  seleniumAddress: 'http://hub.browserstack.com/wd/hub',

  // Pattern for finding test spec files
  specs: ['test/**/*.spec.js']
}

Change your user name and secret key to the ones given on the Browserstack Automate page. If you're logged in to Browserstack, the instructions for setting up node.js will have you user and key substituted in the examples, and you can just copy-paste the javascript from there.

The same page also has a tool for generating the code for different test browser settings.

4. Download and run BrowserStackLocal

Download the BrowserStackLocal binary from the node.js instructions page.

Make the following changes to the command below, and run the binary to open the Browserstack tunnel required for testing.

• Change your secret key in the command. Again, your_secret_key will be automatically substituted in the node.js guide, if you're logged in to Browserstack.

• Change the port number to match the port you're hosting your AngularJS files at on localhost. The example uses port 3000.

  ./BrowserStackLocal your_secret_key localhost,3000,0
  

5. Run the tests

With everything ready for testing, run your tests:

protractor protractor.conf.js

You can watch the test run on Browserstack Automate and even see an updating live screenshot of the test browser.

Answer 3

We just wrote a blog post and open-source modules for this.

http://www.blog.wishtack.com/#!Cross-browser-testing-test-automation-with-Protractor-and-Browserstack/cuhk/554b3b5f0cf27313351f1163

wt-protractor-boilerplate wt-protractor-runner wt-protractor-utils

Answer 4

Hello! To only run the test against Browserstack, you may need to skip Step 4 from Niko Nyman answer, and in your conf.js you should have something like here's the one that I've used (+ report), then run Step 5:

---

    var HtmlReporter = require('protractor-html-screenshot-reporter');
var reporter=new HtmlReporter({
    baseDirectory: './protractor-result', // a location to store screen shots.
    docTitle: 'Report Test Summary',
    docName:    'protractor-tests-report.html'
});

// An example configuration file.
exports.config = {
  // The address of a running selenium server.
  seleniumAddress: 'http://hub.browserstack.com/wd/hub',

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome',
    'version': '22.0',
    'browserstack.user' : 'user_name',
    'browserstack.key' : 'user_key',
    'browserstack.debug' : 'true'

  },

  // Spec patterns are relative to the current working directly when
  // protractor is called.
  specs: ['./specs/home_page_spec.js'],

  // Options to be passed to Jasmine-node.
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  },
 onPrepare: function() {
        jasmine.getEnv().addReporter(reporter);
      }

  };