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.