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 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 2

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.