Better End-to-End Testing With Page Object ModelUsing ProtractorKasun Kodagoda | Team FinaleTrainee Software Engineer | 99X Technology

Overview• Protractor• What is it?• Getting Up and Running• Basic Requirements

• Page Objects• What is it?• Why Use it?• A Deeper Dive..• Demo

Protractor

What Is It?“Protractor is an end-to-end test framework for AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would”

Source: Official Protractor Website

What Is It?• Combination of powerful technologies and tools for

testingNode.js, Selenium, Jasmine, WebDriver, Cucumber, Mocha

• Wrapper for Selenium, made for Angular.js• Uses angular specific constructs for capturing elements

Model, bindings, repeaters etc.• Runs on real browsers as well as headless browsers

Get Up And Running..• Install Node.js• Install Protractor

npm install –g protractor

• Install WebDriverwebdriver-manager update

• Start WebDriverwebdriver-manager start // do this before you run the tests

Basic Requirements• You’ll need 2 basic files to start,• A Test/Spec file

Contains the element references, assertions• The Configuration File

Contains the configuration options for running protractor

• Use your preferred test framework to write tests• Jasmine – Fully Supported• Mocha – Limited Support• Cucumber – Limited Support

Sample Config Fileexports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', capabilities: { 'browserName': 'chrome' }, specs: [ 'specs/*Spec.js' ], jasmineNodeOpts: { showColors: true }};

Sample Testdescribe('Test Home Page', function () { it("Should display the text typed in to the input field.", function () { browser.get('http://localhost:8080/#/');

// Type in a value to input field var textInput = element(by.model('sampleInput')); textInput.sendKeys('The KVK Blog');

// Check if the same value is displayed var displayField = element(by.binding('sampleInput')); expect(displayField.getText()).toEqual('The KVK Blog'); });});

Conventional UI Tests• Element references are inside tests• Test are cluttered• Less readable• Very fragile

Page Objects Pattern

What Is A Page Object?“A page object is an object-oriented class that serves as an interface to a page of your AUT”

• Wraps a HTML page/fragment• Provide Application Specific API• Hides the underlying complexity• Used to manipulate elements on page

Why Use Page Objects?• Reduce Code Duplication• Reusable Page Objects• More Readable Tests• Less Vulnerable to Break• More Maintainable Tests

Especially in Agile Based Projects

A Deeper Dive…Return Types

• Methods in Page Objects should return fundamental types

Strings, Dates, Booleans• It can return other complex types as well

Promises, other Page Objects

A Deeper Dive…• Method names can be much closer to what the user is actually

doing.

var inputField = element(by.model(‘first_name’);inputField.sendKeys(‘Kasun’);

Or

element(by.model(‘first_name’)).sendKeys(‘Kasun’);

Instead We can use

somePage.addFirstName(‘Kasun’);

A Deeper Dive…The Dilemma

• Use of assertions• Include Assertions inside Page Objects• Not Include Assertions inside Page Objects

• It’s Subjective and the Choice is yours…

A Deeper Dive…No Assertions in Page Objects for Us. Why??

• Separation of Responsibility• Page Objects should only provide access to HTML pages• Page Objects become longer

A Deeper Dive…What We Believe

“If what we test changes, The assertions and the tests should change”“If the HTML page changes, The Page Object should change”

This, • Allows us to easily modify the tests/specs when functionality

or underlying HTML pages change overtime

http://goo.gl/MFNy9Chttps://github.com/kasunkv/e2e-sample-app.git

Demo

You Have NO Questions…Right?... ;)

Thank YouFor Not Throwing Rocks At Me ^_^