Protractor End To End Testing For AngularJS

Presented By :
Komal Rajpal
&
Gaurav Kumar Shukla

Agenda
1. Introduction of Protractor
2. Why Protractor
3. Pros And Cons of Protractor
4. Protractor Architecture
5. Set up and Configurations
6. Locator Strategy
7. Design Pattern
8. Protractor Control Flow And Promises
9. Testing Non-Angular Apps With Protractor
10.Demo

Protractor
● Protractor is an end-to-end test framework for Angular and AngularJS
applications.
● Protractor runs tests against your application running in a real browser,
interacting with it as a user would.
● Webdriver + Angular = Protractor

Why Protractor
● Test like a user: Protractor is built on top of WebDriverJS, which uses native events and
browser-specific drivers to interact with your application as a user would.
● For Angular Application: Protractor supports Angular-specific locator strategies,
which allows you to test Angular-specific elements without any setup effort on your part.
● Automatic Waiting: No longer need to add waits and sleeps to your test. Protractor can
automatically execute the next step in your test the moment the webpage finishes pending
tasks, so you don’t have to worry about waiting for your test and webpage to sync.

● Angular JS applications have some extra HTML attributes like ng-repeater, ng-controller, ng-
model.., etc. which are not included in Selenium locators.
● Selenium is not able to identify those web elements using Selenium code. So, Protractor on
the top of Selenium can handle and controls those attributes in Web Applications.

Pros of Protractor
● Protractor has built in support for identifying the elements for angular.js
● Suitable for both Angular and non-Angular apps, Switching between them
also easier
● Supports Parallel testing through the same and cross-browser testing.
● The protractor has default waits, which waits for angular element, which
is not present in selenium. Protractor handles this with promises
● It runs on real browsers and headless browsers.
● Works on NodeJS, so the asynchronous process helps to speed up the
execution
● Compatible with Continuous integration

Cons of Protractor
● If there is an issue with WebdriverJs, the Protractor team should wait for
the WebDriverJs team to fix that issue. Protractor is built on webdriverJS
● Works like a duck when we run tests in Internet explorer
● You cannot simulate real user (which is possible in selenium using robot
class)
● Debugging in Protractor is a nightmare
● Could take some time to master all API and technicals if you are not from
selenium background
● It does not have support to automate mobile Apps.

Protractor Setup
Follow below steps to install protractor:
● Install Protractor: Use npm to install Protractor globally with:
○ npm install -g protractor
// This will install two command line tools:
■ Protractor
■ Webdriver-Manager
● Download necessary binaries: The webdriver-manager is a helper tool to easily get an instance of a Selenium Server
running. Use it to download the necessary binaries with:
○ webdriver-manager update
● Start up the server: Start up a server with:
○ webdriver-manager start
// This will start up a Selenium Server and will output a bunch of info logs. Your Protractor test will send requests
to this server to control a local browser.
● Run Protractor Test: Run the test with:
○ protractor conf.js

Locator Strategy
● These locators should be used as a priority when possible:
○ Binding locator:
■ Syntax: by.binding('bind value');
Ex:
● by.binding('user.password')
● by.binding('user.email')
○ Exact Binding locator:
■ Syntax: by.exactBinding('exact bind value')
Ex:
● by.exactBinding('user.password')
● by.exactBinding('password') // Will not work

● Some more...
○ Model locator
■ Syntax: by.model('model value')
Ex:
● by.model('user.username')
○ Button text locator
■ Syntax: by.buttonText('button text')
Ex:
● by.buttonText('Sign In')
○ Partial button text locator
■ Syntax: by.partialButtonText('partial button text')
Ex:
● by.partialButtonText('Register')

● Some more...
○ Repeater locator
■ Syntax: by.repeater('repeater value')
Ex:
● by.repeater('review in reviews')
○ Exact repeater locator
■ Syntax: by.exactRepeater('exact repeater value')
Ex:
● by.exactRepeater('review in reviews')
● by.exactRepeater('reviews') // Won't work
○ CSS and text locator
■ Syntax: by.cssContainingText('css selector', 'text of css element')
Ex:
● by.cssContainingText('.users', 'Rebecca') // Will return the second li only

Protractor Design Pattern
● Page objects is a design pattern which results in less code duplicates, easy
maintenance and more readability.

Protractor Configurations | Conf.js
var config = {};
var timeout = 120000;
config.framework = 'jasmine2';
config.allScriptsTimeout = timeout;
config.getPageTimeout = timeout;
config.jasmineNodeOpts.isVerbose = true;
config.jasmineNodeOpts.defaultTimeoutInterval = timeout;
config.specs = ['qa/**/*Spec.js'];
config.browserName = 'chrome';
exports.config = config;

Some configurations
● Selenium Configuration:
○ seleniumServerJar: 'D:/Eclipse progs/jars/selenium-server-standalone-3.11.0.jar',
○ seleniumServerStartTimeout:20000, // 20 seconds
○ localSeleniumStandaloneOpts:
■ jvmArgs: ['-Dwebdriver.ie.driver=IEDriverServer_Win32_2.53.1.exe']
○ directConnect: false/true

Protractor tests Parameters in Conf.js file
● Specs:
○ specs: ['D:Protractor Demospecs est.js']
○ specs: ['D:Protractor Demospecs*.js'] // will run all the files with js extension
● Excludes:
○ exclude: ['D:Protractor Demospecsdummytest.js']
● Suites:
suites: {
smoke: 'spec/smoketests/*.js',
sanity: 'spec/sanitytests/*.js',
full: 'spec/*.js'
}

Protractor Control Flow and Promises
it('should find an element by text input model', function() {
browser.get('app/index.html#/form');
var username = element(by.model('username'));
username.clear();
username.sendKeys('Jane Doe');
var name = element(by.binding('username'));
expect(name.getText()).toEqual('Jane Doe');
// Point A
});

Testing Non Angular Apps with Protractor.
● Protractor is made for testing Angular applications. However, it is still possible to test non-angular applications with
Protractor if needed.
● Changes needed to test non-angular app with Protractor
○ Use browser.driver.ignoreSynchronization = true
○ Use browser.driver instead of driver
● Protractor waits for angular components to load completely on a web-page befor it begins any execution. However,
since our pages are non-angular, Protractor keeps waiting for 'angular' to load till the test fails with timeout. So, we need
to explicitly tell the Protractor to not to wait for 'angular'

References:
● http://www.protractortest.org/#/
● https://www.udemy.com/course/protractor-tutorial/
● https://rap.knoldus.com/

Protractor End To End Testing For AngularJS

More Related Content

What's hot (20)

Similar to Protractor End To End Testing For AngularJS (20)

More from Knoldus Inc. (20)

Recently uploaded (20)

Protractor End To End Testing For AngularJS