angularjs - 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.