This presentation focuses on implementing Page Objects Model using Protractor for AngularJS apps for more maintainable, reusable and flexible end-to-end testing for your project. The presentations was done at 99X Technology as a Tech Talk session done by Team Finale.

1. Better End-to-End Testing With
Page Object Model
Using Protractor
Kasun Kodagoda | Team Finale
Trainee Software Engineer | 99X Technology

2. Overview
• Protractor
• What is it?
• Getting Up and Running
• Basic Requirements
• Page Objects
• What is it?
• Why Use it?
• A Deeper Dive..
• Demo

3. Protractor

4. 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

5. What Is It?
• Combination of powerful technologies and tools for testing
Node.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

6. Get Up And Running..
• Install Node.js
• Install Protractor
npm install –g protractor
• Install WebDriver
webdriver-manager update
• Start WebDriver
webdriver-manager start // do this before you run the tests

7. 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

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

9. Sample Test
describe('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');
});
});

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

11. Page Objects Pattern

12. 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

13. 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

14. 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

15. 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’);

16. 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…

17. 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

18. 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

19. http://goo.gl/MFNy9C
https://github.com/kasunkv/e2e-sample-app.git
Demo

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

21. Thank You
For Not Throwing Rocks At Me ^_^