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

NOTE: These instructions are solely relevant for protractor versions older than v3.0.

Protractor 3.0 includes built-in support for Browserstack.

Prerequisites

You will get to have node and npm installed.

Check your node version with node --version to confirm it's greater than v0.10.0.

Do as the following:

1. Install Protractor

Use npm to install Protractor globally with:

npm install -g protractor

If you get errors, you are required to run the above command as sudo.

2. Install Browserstack Selenium web driver

EDIT: The BrowserStackLocal tunnel (set up in step 4) is enough. Following Browserstack's instructions for setting up node.js, install the selenium web driver:

npm install -g browserstack-webdriver

3. Set up Protractor configuration

Create a protractor.conf.js file:

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 the user name and secret key substituted in the examples, and you can just copy-paste the javascript from there.

The same page additionally features a tool for generating the code for various 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 are automatically substituted within 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 on the 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, which will automate and update live screenshots of the test browser.