Page Objects with Protractor

Page Objects with Protractor

Hi all, this is a small blog post where I want to discuss in brief the use of page objects model for protractor test automation. 

When writing test automation scripts, regardless of the type of automation tool used one of the main aspects is to ensure that test scripts are clean and is not duplicate. The way to ensure that code duplication is avoided is to follow the page object model within the automation framework.

Lets take a login page where the user needs to enter an email address as the user name along with a password. The main elements of this login page will be a text filed to enter the user name as an email, a second text field to enter the password and a button to submit the login credentials.

In the below code, the first four lines are to identify the elements that are available in the login page with the use of ID locator. Next, lets say we want to handle the page URL as a page object, so we add a function and call the browser.get to load the necessary URL.

in our page object class, for each of the test fields such as user email, we create a function that obtains the values to to sendKeys method passed from the test scripts. Once all the functions are declared, the module.exports declaration is used to expose the class to the outside.

 let loginPage = function() {

 let userName_input = element(by.id('loginEmail'));

 let passWord_input = element(by.id('loginPassword'));

 let loginCheck = element(by.id('rememberLoginChk'));

 let loginButton = element(by.buttonText('Submit'));

 this.get = function(url) {

  browser.get(url);
};


 this.enterLoginEmail = function(email) {

  userName_input.sendKeys(email);
};


 this.enterLoginPassword = function(password) {

  passWord_input.sendKeys(password);
};


 this.clickLoginCheck = function() {

  loginCheck.click();
};


 this.clickLoginButton = function() {

  loginButton.click();
};

};

module.exports = new loginPage();

Lets look at the below code created to run the test. The first line of the test we call the

page object class by using the require keyword and pointing to the class that declared the 

page objects. Since all the hard work has already been done on the page object class, for the

test to pass the user name and password we call the function name and pass the relevant value as

shown from lines 18 to 21.

Once the values are passed the relevant function of the page object class will call the sendKeys

function and pass the value to the field identified by the locators we call from the ID field

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
let loginPage = require('../page-objects/loginPage')
describe('Super hero test', function(){

    beforeAll(function(){
        browser.ignoreSynchronization = true
        browser.waitForAngularEnabled(false);
        loginPage.get('http://localhost:8000/index.html');
    });

    it('should have a title', function() {
        expect(browser.getTitle()).toEqual('Welcome. Please Log In.');
    });


    it('load the login page and submit credentials', function() { 

        //enter test to login page
        loginPage.enterLoginEmail('username@email.com')
        loginPage.enterLoginPassword('password')
        loginPage.clickLoginCheck()
        loginPage.clickLoginButton()
      
    });

    this.afterAll(function() {

    });



})