Protractor for E2E Testing: Expert Guide with Code Examples

As an app tester with over 10 years of experience across 3000+ browser and device combinations, I‘ve seen first-hand the growing importance of test automation for Angular apps.

This comprehensive tutorial will teach you how to harness Protractor and Selenium to automate effective browser testing.

Introduction to Protractor Testing Framework

Protractor is an end-to-end (E2E) test framework created specifically for Angular and AngularJS web applications. Offering integration with Selenium WebDriver, it extends Selenium’s capabilities to understand and interact with Angular component models.

According to the State of JS report, Angular is used by 60.8% of JavaScript developers. As adoption increases, the need to test Angular frontends at scale is also rising exponentially.

Here’s an at-a-glance view of Protractor’s key capabilities:

Feature	Description
Angular Focus	Understands Angular locators like ng-model, ng-binding for easy element finding
Cross Browser Testing	Execute test automation across browsers like Chrome, Firefox, Edge etc
Mobile Testing	Emulate interactions across mobile devices of various sizes
Debug Integration	Integrate tools like browser logs, screenshots to debug test failures
Framework Agnostic	Works with test frameworks such as Jasmine, Cucumber, Mocha
Continuous Integration	Easily incorporate Protractor tests into CI/CD pipelines

In this comprehensive guide, you’ll learn:

• How Protractor extends Selenium WebDriver functionality
• Steps to set up Protractor test environment
• Writing automation test scripts with sample code
• Executing test suites across desktop and mobile browsers
• Integration with BrowserStack for 2000+ real device cloud
• Comparing other test automation frameworks

First, let’s look at how Protractor works behind the scenes.

Understanding Protractor Architecture

Protractor sits on top of Selenium WebDriver to interact with web apps. Here is the typical flow:

1. The Protractor test runner picks up and parses test suite details from your configuration file

2. Test actions are translated by WebDriverJS client into WebDriver protocol commands

3. These are sent to WebDriverJS server which forwards them to browser drivers

4. The browser drivers execute actions on your app and relay back results

This architecture talks to browsers using Selenium’s JSON wire protocol to enable native browser interactions.

Setting Up Protractor Environment

Before writing Protractor tests, we need:

• Node.js: For running JavaScript-based tests

  • Install from https://nodejs.org/en/

• Protractor package: Provides access to Protractor APIs

  • Install globally using npm install -g protractor

• Webdriver manager: Manages setup and versions of browser drivers

  • Install using npm install webdriver-manager
  • Update with webdriver-manager update

Verifying the versions:

$ node -v
# v12.18.3 

$ protractor --version
# 7.0.0

$ webdriver-manager --version
# 12.1.7

With this setup, you can now author Protractor tests.

Writing Protractor Test Suites

Protractor test suites contains:

1. Spec files: Contain the test logic and flow
2. Configuration file: Houses setup parameters

Here is a sample test checking Google search:

Spec File

// google_spec.js

describe(‘Google Search‘, () => {

  it(‘can find search results‘, () => { 

    browser.get(‘https://google.com‘);

    $(‘#searchBox‘).sendKeys(‘BrowserStack‘);

    $(‘searchBtn‘).click(); 

    expect(browser.getTitle()).toContain(‘BrowserStack‘);

  });

});

Configuration File

// conf.js

exports.config = {

  framework: ‘jasmine‘,

  specs: [
   ‘./google_spec.js‘   
  ],

  capabilities: {
    browserName: ‘chrome‘ 
  }

}

This config uses Jasmine bindings and will execute the spec on Chrome browser by default.

Running Protractor Test Automation

To kick off the full test suite, run:

protractor conf.js

The WebDriver Manager kicks in automatically without needing a standalone Selenium server.

Behind the scenes, the spec file triggers browser interactions to complete the test flow.

Some key operations happening:

• Protractor locates elements using Angular locators like ng-model
• Test actions are simulated like search box text entry and button clicks
• Browser navigations and page title is asserted for expected state
• Test results are reported back to console on assertion pass/failures

Parallel Cross Browser Testing

We can run our tests across multiple browsers like Chrome and Firefox in parallel:

multiCapabilities: [{

  browserName: ‘chrome‘

}, {

  browserName: ‘firefox‘ 

}]

This vastly cuts down total execution time and cost!

Integration with BrowserStack

While local browsers are easier to setup, testing on BrowserStack‘s real device cloud gives you 2000+ browser-OS-device combinations to cover your entire target audience.

To run Protractor scripts on BrowserStack:

• Update config.js with BrowserStack username, access key and Selenium Hub URL
• Specify browsers and devices needed under capabilities
• Execute tests and view detailed reports on BrowserStack dashboard

Sample Config Integration

// conf.js

exports.config = {

  seleniumAddress: ‘http://hub-cloud.browserstack.com/wd/hub‘,

  commonCapabilities: {
    ‘browserstack.user‘: ‘johndoe‘,
    ‘browserstack.key‘: ‘AbCk123def‘
  },

  multiCapabilities: [{

    ‘bstack:options‘ : {
      os : ‘OS X‘,
      osVersion : ‘Monterey‘,
      deviceName : ‘iPhone 14 Pro‘,
    }

  },{

    browserName: ‘firefox‘,
    browserVersion : ‘104.0‘

  }]

}

This allows running browser tests directly on real mobile devices and desktops for more reliable test results.

Comparing Protractor with Other Frameworks

Here I have summarized how some popular test automation frameworks compare to Protractor:

Framework	Key Features
Cypress	Fast execution, time travel debugging, works on top of browser
WebdriverIO	Feature-rich API, integrates with SauceLabs, TestingBot cloud
TestCafe	Open source, launches browsers automatically, recorder capability

While I recommend WebdriverIO and Cypress for most use cases going forward, Protractor still holds relevance for teams with sizeable Angular-based test suites.

Conclusion

I hope this detailed walkthrough gives you a firm grasp over test automation using Protractor framework. With capabilities to handle complex Angular frontends and seamless integration with CI/CD systems, Protractor unlocks rapid test creation.

By following the outlined best practices and offloading executions to a scalable device cloud, you can maximize test coverage while reducing overall effort.

Feel free to reach out in comments if you have any other questions!