Creating Solid Reusable Framework in Protractor through Page Object Model

Any test automation tool helps us to automate the manual testing regression cycle. Each tool can automate an application's test process on a specific platform or a set of multiple platforms. The capability of the test automation tool can be increased with the integration of other tools into a single framework where boundaries can be broken. Similarly the frameworks should be made configuration easy, enabling tools to execute in multiple environments.

The most important component that a test automation tool should provide is the capability of reusing the functions and page elements across multiple test cases in the test suite. As all of us know the Page Object Model is capable to organize test scripts and make test reusable. This is highlighted when we create test automation frameworks with well known automation buddy Selenium WebDriver. We made awesome reusable frameworks with Selenium WebDriver using the Page Object Model. Did you'll ever think that this concepts can be applied across other automation tools? Yes the dream has come true. We can use the same page object module in Protractor. In this article I'm going to transfer my knowledge how we can do so.

Picture taken from https://www.softwaretestingmaterial.com/page-object-model/

First in our example I have taken a scenario navigating to a sample clothing site and trying to login to the site as a member.

Following is the Page Class for the HomePage.  

'use strict';
var homePage = function() {
    this.signInLink = element(by.css('a.login'));
   
    this.get = function() {
    browser.get("https://automationpractice.com/index.php");
    };
    this.clickLogin = function(){
      this.signInLink.click();
    };
   
}; 

module.exports = new homePage();

Next Page class is for the Login Page

'use strict';
var signInPage = function() {
    this.emailInput = element(by.id('email'));
    this.passwordInput = element(by.id('passwd'));
    this.submitButton = element(by.id('SubmitLogin')); 
    this.setEmail = function(userName) {
     this.emailInput.sendKeys(userName);
    };
    this.setPassword = function(password) {
     this.passwordInput.sendKeys(password);
    };
    this.clickSubmit = function(){
      this.submitButton.click();
    };
   
}; 

module.exports = new signInPage();

Finally this is our test scenario, which uses the both page classes.

var homePage = require('./HomePage.js');
var signInPage = require('./SignInPage.js');
describe('Go to home page login and search', function() {
  it('Go to home page and login', function() {
      browser.ignoreSynchronization = true;
      homePage.get();
      browser.waitForAngularEnabled(false) 
      homePage.clickLogin();
      browser.waitForAngularEnabled(false);
      signInPage.setEmail("[email protected]");
      signInPage.setPassword("cat584851");
      signInPage.clickSubmit();
  });

});

This test cases also can be further enhanced by adding the capability of reading JASON files which makes it more configurable. Hope this article englightend every reader on how we can utilize the Page Objecty Model with Protractor.