Our Engineers can Write as well

Why automate AngularJS applications with Protractor rather than Selenium? – Part III

Page Objects Demystified

In our earlier blogs based on Protractor, we saw the reasons for its adoption over Selenium and how to identify the DOM elements in a web page using Protractor locators.

If you had missed the blogs, CLICK HERE:

We now present you with the 3rd blog in the series, which demystifies PAGE OBJECT while choosing Protractor for test automation.

Page Objects, a quick intro

Page Object is a widely used design pattern in test automation that eases test framework maintenance and reduces code duplication. The key function of the Page object is to replicate object-oriented class that acts as an interface to a page of your application under test (AUT). The tests will call the methods of the respective page object class whenever the tests interact with the user interface of the AUT.

The reason for its wide popularity is that during test automation, even if your UI changes, you are not required to modify anything inside the test code, which at times is a tedious long drawn process. All you must do is update code in Page Objects.

How to Organize tests using Page Objects

When doing end to end test automation, a common pattern among testers is to use Page Objects. It helps you write cleaner tests by wrapping the UI elements in your application page. Moreover, a Page Object can be reused across multiple tests and if the template of your application changes, you need to only update the Page Object file avoiding tedious internal code updates.

You may also see that your test workflows are in the specs while logic and UI elements are in the page objects. This is perhaps the best way to separate these two components.

Here’s an example of a simple test script (Spec_withoutpageobject.js) for ‘Page Object’,

Without Page Objects:
Code Below:

describe(‘Sample test without page Object Model’, function() {
it(‘It should launch the application without implementing page object model’, function() {
browser.get(URL);
element(by.id(‘input-box’)).sendKeys(”);
element(by.id(‘signup-button’)).click();
});
});

With Page Objects:

To implement Page Objects, we need to first create the Page object. A Page Object for ‘The Basics’ example on the signup_page.js could look like this:

Code Below:

var signup_page = function(){
//variable declarations
var signup = element(by.id(‘signup-button’));
var button = element(by.model(‘login’));
// function declarations
this.signup_click = function(){
signup.click();
};
this.login_click = function(){
login.click();
};
};
module.exports = new signup_page();

Let’s create a page object for below Signup and login button.

page objects

Once page object creation is complete, we can modify the test script in step definition file. Here functionality of the test script remains unchanged at any given point of time.

Specification file (spec_PageObjects.js):
Code Below:

var signup_page = require(‘./signup_page.js’);
describe (“This test is implemented with Page Object Model”, function () {
it (“It Should launch the application and perform basic actions in Web UI”, function () {
browser.ignoreSynchronization=true;
browser.get(URL);
signup_page.signup_click();
});
});

Hence the Folder structure will look like,

page objects

Though it is a simple example, it should give you ample information to adopt Page Object for your design pattern.

Keep checking this space to know more of Protractor and why it scores over Selenium when it comes AngularJS Apps test automation.

To Be Continued

parthiban - Software Test Engineer

Contributed by:

Parthiban
Software Testing Engineer

There is 1 comment
  1. Ranjith

    All the best parthiban

Your email address will not be published. Required fields are marked *