Protractor Deployment & Usage Guide

End-to-end testing framework for Angular and AngularJS applications.

1. Prerequisites

Before installing Protractor, ensure you have the following:

Node.js: Version 6.0 or higher (required for Protractor 5)
Java JDK: Version 8 or higher (required for Selenium Server)
Web Browser: Chrome or Firefox installed
Git: For cloning repositories (if installing from source)

2. Installation

Global Installation (Recommended for Usage)

# Install Protractor globally
npm install -g protractor

# Verify installation
protractor --version

# Update WebDriver binaries (ChromeDriver, GeckoDriver)
webdriver-manager update

Local Installation (For Development/Contributing)

# Clone the repository
git clone https://github.com/angular/protractor.git
cd protractor

# Install dependencies
npm install

# Build the project (if needed for development)
npm run build

3. Configuration

Create a protractor.conf.js file in your project root:

exports.config = {
  // Selenium Server address (start with webdriver-manager start)
  seleniumAddress: 'http://localhost:4444/wd/hub',
  
  // Test files pattern
  specs: ['e2e/**/*.spec.js'],
  
  // Browser capabilities
  capabilities: {
    browserName: 'chrome'
  },
  
  // Base URL for your application
  baseUrl: 'http://localhost:4200',
  
  // Framework configuration
  framework: 'jasmine',
  
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  },
  
  // Angular compatibility settings
  // Note: For Angular (2+) apps, use by.css instead of by.binding/by.model
  onPrepare: function() {
    browser.waitForAngularEnabled(true);
  }
};

Important Compatibility Note: For Angular (2+) applications, by.binding and by.model locators are not supported. Use by.css instead:

// Angular 2+ - Use this
var header = element(by.css('.app-header'));

// AngularJS only - Not supported in Angular 2+
// var input = element(by.model('user.name'));

4. Build & Run

Running Tests Locally

Start the Selenium Server (in a separate terminal):
```
webdriver-manager start
```
Run your tests:
```
protractor protractor.conf.js
```

Run specific test files:

protractor protractor.conf.js --specs=e2e/login.spec.js

Running Protractor's Own Test Suite (Development)

# Start the test application
npm start

# In another terminal, run the test suite
npm test

Running the Documentation Website Locally

cd website
npm install
npm start
# Or serve statically
python -m http.server 8000

5. Deployment (CI/CD Integration)

Since Protractor is a testing framework, "deployment" refers to integrating tests into your CI/CD pipeline.

Travis CI Configuration

language: node_js
node_js:
  - "10"
before_script:
  - npm install -g protractor
  - webdriver-manager update
  - webdriver-manager start &
  - sleep 3 # Give WebDriver time to start
script:
  - protractor protractor.conf.js

Headless Mode (for CI environments)

Update protractor.conf.js for headless Chrome:

capabilities: {
  browserName: 'chrome',
  chromeOptions: {
    args: ['--headless', '--disable-gpu', '--window-size=1920,1080']
  }
}

Docker with Selenium Grid

# docker-compose.yml
version: '3'
services:
  selenium-hub:
    image: selenium/hub:3.141.59
    ports:
      - "4444:4444"
  chrome:
    image: selenium/node-chrome:3.141.59
    depends_on:
      - selenium-hub
    environment:
      - HUB_HOST=selenium-hub
      - HUB_PORT=4444

Update config to use remote Selenium:

seleniumAddress: 'http://localhost:4444/wd/hub',

Cloud Testing Services

For Sauce Labs or BrowserStack:

exports.config = {
  sauceUser: process.env.SAUCE_USERNAME,
  sauceKey: process.env.SAUCE_ACCESS_KEY,
  
  capabilities: {
    browserName: 'chrome',
    platform: 'Windows 10',
    version: 'latest'
  }
};

6. Troubleshooting

WebDriver Connection Refused

Error: ECONNREFUSED connect ECONNREFUSED 127.0.0.1:4444 Solution: Ensure webdriver-manager start is running in a separate terminal before executing tests.

Angular Synchronization Timeouts

Error: Timed out waiting for Protractor to sync with the page Solution:

Verify baseUrl is correct in config
For non-Angular pages, disable Angular waiting: browser.waitForAngularEnabled(false)
Increase timeout in jasmineNodeOpts.defaultTimeoutInterval

Locator Not Supported (Angular 2+)

Error: by.binding or by.model not found Solution: As noted in compatibility docs, Angular (2+) applications do not support these locators. Replace with CSS selectors:

// Instead of by.model('name')
element(by.css('input[ng-model="name"]'))
// Or better, use a specific class
element(by.css('.user-name-input'))

ChromeDriver Version Mismatch

Error: session not created: This version of ChromeDriver only supports Chrome version X Solution:

webdriver-manager clean
webdriver-manager update

Element Not Found Errors

Ensure the element is not inside an iframe (use browser.switchTo().frame() if so)
Add explicit waits: browser.wait(EC.presenceOf(element), 5000)
Check that the app is fully bootstrapped before test execution

Debug Mode

Run with interactive debugging:

protractor protractor.conf.js --elementExplorer

Or add browser.pause() in your test code to pause execution at that point.

How to Deploy & Use angular/protractor