Protractor Notes

Protractor Installation

Install Protractor Globally

npm install -g protractor
  • In MacOSX, this should install protractor in: /usr/local/lib/modules/node_modules/protractor

Install Selenium Webdriver for Chrome

webdriver-manager update

Start the server

There are really 2 ways that we can run protractor. We can either run it throught the default Selenium server which is configured out of the box. Or we can use the Chrome Only Driver and run it via the http-client.

The Selenium Server Way

Start the Selenium server
webdriver-manager start

The Chrome Only Way

Create a file called chromeOnlyConfig.js

Create a file called chromeOnlyConfig.js and place it inside your projects root folder. Below is a sample that use the Chrome Driver. Note that the chromeDriver: location points to your global installation of the chrome driver node module, which you installed previously.

exports.config = {
  chromeOnly: true,
  chromeDriver: '/usr/local/lib/node_modules/protractor/selenium/chromedriver',
  
  capabilities: {
    'browserName': 'chrome'
  },
  
  baseUrl: 'http://localhost:8080/',
  specs: ['spec/e2e/**/*.js'],

  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  }
};
  • The Protractor Chrome Only configuration can then be started by running the command:
protractor chromeOnlyConf.js 
Start Chrome Only via the HTTP Server
  • Install the http-server
npm install http-server -g
  • start the http-server by going into your projects root folder and running the following command:
http-server -p 8080
  • Browsing to http://localhost:8080 should now work.
  • In order to run the Protractor tests in a ChromeOnly configuration, you must have the http-server running. Once it's running, you can run the 'protractor chromeOnlyConf.js' command from your projects root folder.
Quick Recap of Chrome Protractor and Karam Setup on a new project

These are the steps that need to be executed on a new project.

bower install angular
bower install angular-mocks
bower install karma (note - we just do this to get karam intelisense)
mkdir app
mkdir spec
mkdir spec/unit
mkdir spec/e2e
npm install protractor
webdriver-manager update
populate the chromeOnlyConf.js
populate the karma.config.js
npm install http-server
http-server -p 8080

Protractor Locators

Protractor Github page