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?
NOTE: These instructions are only relevant for Protractor versions older than v3.0. Protractor 3.0 includes built-in support for Browserstack.
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?
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.
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
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.
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 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
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.
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:
Code Generator - Helps you configure the capabilities to test on different various browser and OS combinations especially mobile devices.
Sample Github project for Protractor-BrowserStack - This should help you get started.
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);
}
};
We just wrote a blog post and open-source modules for this.
wt-protractor-boilerplate wt-protractor-runner wt-protractor-utils
