Thursday, September 21Be an Automation Engineer

Protractor page object model framework

Page object model is a most popular and widely used framework for automating any web application. Protractor is also suitable to use Page Objects design.

What is Page Object?

As per Selenium Guys:
“Within your web app’s UI there are areas that your tests interact with. A Page Object simply models these as objects within the test code. This reduces the amount of duplicated code and means that if the UI changes, the fix need only be applied in one place.”

Page Object model is useful to achieve modularity in our code. Code reusability will be increased. If there is a change in the UI in future, we can easily update our business menthod with respect to the new change if we follow page object model. To know more about page object design ‘Click here‘.

In page object model we can define all the locators and functions(actions) of a web page in a separate Js file. Lets say we have login page is our page under test. We write all the elements(Login field, Password Field, Sign In button etc..) and operations(enter username, enter password, click sign in, getLoginPageTitle etc..) in a single js file(login.po.js). Our spec(test script) would look like below without page objects.

Without Page Objects:

Here’s a simple test script (example_spec.js) for ‘The Basics’ example on the angularjs.org homepage.

describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    browser.get('http://www.angularjs.org');
    element(by.model('yourName')).sendKeys('Vijay');
    var greeting = element(by.binding('yourName'));
    expect(greeting.getText()).toEqual('Hello Vijay!');
  });
});

Now lets convert the above script to page object model. For that we need to separate elements and operations from test script(example_spec.js) and maintain them in angularHomePage.po.js.

With Page Objects:

angularHomePage.po.js

var AngularHomepage = function() {
  var nameInput = element(by.model('yourName'));
  var greeting = element(by.binding('yourName'));

this.get = function() {
    browser.get('http://www.angularjs.org');
  };

this.setName = function(name) {
    nameInput.sendKeys(name);
  };

this.getGreeting = function() {
    return greeting.getText();
  };
};
module.exports = AngularHomepage

The next thing we need to do is modify the test script to use the PageObject and its properties.
example_spec.js

var homePage = require('./../pageobjects/angularHomePage.po.js');
describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    var angularHomepage = new homePage();
    angularHomepage.get();
    angularHomepage.setName('Vijay');
    expect(angularHomepage.getGreeting()).toEqual('Hello Vijay!');
  });
});

Observe that we have imported the page object in first line and used those methods in the test.

Now your config file will be.
config.js

exports.config = {
    seleniumAddress: 'http://localhost:4444/wd/hub',
    capabilities: {
        'browserName': 'chrome'
    },
    framework: 'jasmine',
    specs: ['./specs/**/*.js'],
    jasmineNodeOpts: {
        defaultTimeoutInterval: 30000
    },
    onPrepare: function () {
        browser.manage().window().maximize();
        browser.manage().timeouts().implicitlyWait(5000);
    }
};

Folder structure for reference:

protractorbasicpageobjectmodel

How to run?

Make sure you have started selenium server.

webdriver-manager start

Now run tests in new terminal.

protractor config.js

%d bloggers like this: