Protractor Page Object Model

Hi All, I would like to share my learning regarding Protractor Page Object Model (POM). Protractor is an end to end test framework used to automate Angular web applications.

In POM, for each web page there should be corresponding page class. Carrying out the task of "Finding the web elements and methods" will be done from the page class. This of course improves the maintainability and reusability of the code.

Here I will show a simple example without Page Object Model which I have written in Javascript using Protractor framework.

describe('Angular home page', function () {

    it('should add the String in todo list ', function () {
        browser.get('https://angularjs.org/');
        element.all(by.css("[placeholder='add new todo here']")).sendKeys("Add POM");
        element(by.css('input.btn-primary')).click();

        var getText = element.all(by.css('label.checkbox'));
        getText.get(2).getText().then(function (results) {
            expect(results).toEqual("Add POM");
        });
    });
});

To improve the code we will write the test script with Page Object Model, for that we should create a new page class to apart the web elements and the methods.

var HomePage = function () {

    var textField = element.all(by.css("[placeholder='add new todo here']"));
    var addButton = element(by.css('input.btn-primary'));
    var textResults= element.all(by.css('label.checkbox'));

    this.setText = function (text) {
        textField.sendKeys(text);
    };
    this.clickAddButton = function () {
        addButton.click();
    };
    this.getText=function () {
        return textResults;
    };
};
module.exports = new HomePage();

To run the test we will write a script to use the Page objects and the methods.

describe('Angular page', function () {
    it('should add the String in todo list ', function () {
        browser.get('https://angularjs.org/');

        var angularHomePage = require(protractor.basePath + '/e2e-tests/blog/angularPage.js');
        angularHomePage.setText("Add POM");
        angularHomePage.clickAddButton();

        var getText = angularHomePage.getText();
        getText.get(2).getText().then(function (results) {
            expect(results).toEqual("Add POM");
        });
    });
});

Now You are set to run the test script with Page Object Model, Which is useful when the test suite grows with addition of new test cases, Page Object classes can be used in any number of test scripts which uses the same set of elements defined in the respective page object class.