Table of content

• Page Object Model in protractor
• Page Objects Class in TypeScript
• Library files in Page object model in Protractor
• Spec files
• JSON File Data for Page Object Model(POM)
• Read Excel data for POM
• Winston Logging in Page Object Model in Protractor

Page Object Model(POM) is an object design pattern implementations of Page factory in protractor, where web pages are represented as Typescript classes, and the various elements on the page are defined as a method on the PO classes. All reusable methods are stored in libraries

• Page Object Model(POM) is one of the implementations of the design pattern called Page Factory.
• In protractor, we will create the Page Object Modal class to develop and store the re-usable methods. These methods are nothing but Page Objects
• Page Objects are nothing but web elements present on the web page like Buttons, links, tabs, text bars
• We have to create page object class for every page present in the application if the application is single page application (spa) we have to create page object classes for each tab

The folder structure of the POM framework in protractor:

Value selected or not in the dropdown

Page Object class contains all the page object(web elements) for a particular page. For every page present application, we have to write the Page Object class.

Page Object class name should end with PO so that it will be easy for the user to identify the page object class.

Below code is an example for the Page objects in typescript, we will discuss how to form page object in javascript in the next topic.

• Create new folder and name it as PageObjectModel_CherCherTech
• Create another folder called PO.
• Create a new file inside the PO folder and name it as GooglePO.ts, saving with ts extension is very important
• Create a class called GooglePO and export it

Page Object through Variables :

• Create a variable called the searchbar inside the GooglePO class.
• Find the search bar and assign that ElementFinder to the searchbar variable.

public static googleSearch = element(by.name("btnK"))

Page Objects through Methods :

• Create a public method called feelingLucky() inside the GooglePO class
• Find the feeling lucky button and return it

// using method
feelingLucky(){
    return element(by.name("btnI"))
}

Complete code for the Page Objects in protractor

import { browser, element, by } from "protractor";
export class GooglePO{
    // using variables
    public static searchBar = element(by.name("q"))
    public static googleSearch = element(by.name("btnK"))
    // using method
    feelingLucky(){
        return element(by.name("btnI"))
    }
}

Handle Hidden division Pop Up / Calendar Pop up using Protractor

Sometimes we may have repeating test steps across the script; in such cases, we have to create those steps as re-usable methods. Re-usable methods can be used across multiple scripts in the framework

• Create a folder called Lib inside the PageObjectModel_CherCherTech
• Create a file called GoogleLib; the name should match with your PO file except for the suffix
• Create a class called GoogleLib; the name should match with your PO file except for the suffix
• Write a public method searchGoogle(), which accepts a string parameter
• Inside searchGoogle() place google searching code

searchGoogle(searchTerm :string){
	GooglePO.searchBar.sendKeys(searchTerm)
	GooglePO.searchButton.click()
}

Complete code for Library files

import { GooglePO } from "../PO/GooglePO";
export class GoogleLib{
    searchGoogle(searchTerm :string){
        GooglePO.searchBar.sendKeys(searchTerm)
        GooglePO.searchButton.click()
    }
}

Handle Authentication Pop Up in Protractor

Spec files will have our test codes; it is important to have a separate folder for every category.

• Create a folder called Specs in inside the PageObjectModel_CherCherTech folder
• Create a file called GoogleSpec.ts; this should match with PO and Lib file names except for the suffix
• Create describe and It blocks for test cases

import { browser } from "protractor";
import { GoogleLib } from "../Lib/GoogleLib";
import { GooglePO } from "../PO/GooglePO";
let googleLib = new GoogleLib()
describe("Page Object Model in Protractor",function(){
  browser.ignoreSynchronization = true; // for non-angular websites
  it("Search Google",function(){
    browser.get("https://google.com")
    googleLib.searchGoogle("chercher tech")
  });
  it("click operation",function(){
    browser.get("https://google.com")
    GooglePO.feelingLucky().click()
  });
});

Conf file for the test

exports.config = {
  // launch locally when fields directConnect and seleniumAddress are not provided
  chromeDriver: 'D:/Eclipse progs/driverserver/chromedriver.exe',
  seleniumServerJar: 'D:/Eclipse progs/jars/selenium-server-standalone-3.11.0.jar',
  specs: ['D:Protractor DemoJSFilesLocationPageObjectModel_CherCherTechspecs	est.js'],
  capabilities: {
	browserName: 'chrome'
  }
}

By this time, You might have got an idea of how the Page object model will work. If you are only looking for this, then your search ends now.

But if you are looking for enhancements in the page object model, then please do follow the following topics as well.

keep the above structure; I will mention what are the changes to make in the existing file or new file if required

Protractor Interview Questions

Video Tutorial for POM in Protractor :

While creating a POM framework, it is important to read data from the external files, so in the below code, we would be reading values from JSON File.

In this JSON class, we have to write methods to read and write the data from the JSON file.

• Create a folder called 'utility' inside the PageObjectModel_CherCherTech folder.
• Create a file called jsonUtility.ts
• Create Class inside the 'jsonUtility.ts' called JSONutils
• In this class, we have to write a function for reading and writing the JSON files
• Please do visit JSON reading and writing in the Protractor tutorial.

JSON data file named as 'cherchertech.json'

{
	"name": "karthiq",
	"age": 27,
	"gender": "Male",
	"website": "cherchertech protractor"
}

JSON file Reading Code.

// import the fs module
const fs = require('fs');
export class JSONutility{
    public readData(path:string, propertyToRetrieve:string){
        // read the file into raw data
        let rawdata = fs.readFileSync(path);
        // parse the raw data into meaningful JSON format
        let author = JSON.parse(rawdata);
        let websiteValue = author["website"]
        return websiteValue
    }
}

Now read the 'website' property from the JSON file as our search term. Please make changes in existing it block or add this as new it block in the test spec file

We have to pass the path of the JSON file and the 'property' to read from the JSON file to make the JSON reading for common to all.

it("Search Google with JSON reading",function(){
    browser.get("https://google.com")
    let searchTerm = jsonutil.readData("./cherchertech.json", "website")
    googleLib.searchGoogle(searchTerm)
  });

Scroll an element Into View using JavaScript Executor in Protractor

Data could be stored in Excel sheets as well in Page Object Model(POM); in such cases, we have to create a utility class to read the data from the excel sheet file in POM.

• Create a file called excelUtility.ts
• Create Class inside the 'excelUtility.ts' called EXCELutils
• In this class, we have to write a function for reading and writing the EXCEL files
• Please do visit EXCEL reading and writing in the Protractor tutorial.
• We can read the excel sheet using ExcelJS modules in protractor with Javascript/Typescript
• Find the numbering for rows and cells

Excel reading utility in typescript protractor

import {Workbook, Row, Cell, Worksheet} from 'exceljs';
const wb:Workbook = new Workbook();
export class EXCELutility{
    public readExcel(excelPath:string, sheetName:string,
        rowNumber:number, columNumber:number){
            // read xlsx file type and return entire function after receiving return
            return wb.xlsx.readFile(excelPath).then(function(){
            //sheet object
            let sheet:Worksheet = wb.getWorksheet(sheetName);
            //row objct
            let rowObject:Row = sheet.getRow(rowNumber);
            // cell object
            let cellObject:Cell = rowObject.getCell(columNumber);
            // get value from cell
            let cellvalue = cellObject.value
            // return valu from function
            return cellvalue
        })
    }
}

import { browser } from "protractor";
import { GoogleLib } from "../Lib/GoogleLib";
import { EXCELutility } from "../utility/excelutility";
let googleLib = new GoogleLib()
let excelutil = new EXCELutility();
describe("Page Object Model in Protractor",function(){
  browser.ignoreSynchronization = true; // for non-angular websites
  it("Search Google",function(){
    browser.get("https://chercher.tech")
    excelutil.readExcel("test.xlsx", "Sheet1", 2, 1).then(function(searchTerm){
      console.log(searchTerm)
      googleLib.searchGoogle(searchTerm.toString())
    })
  });
});

Package.json with Protractor

It is crucial to do the in the execution of the framework; In protractor, we will be using the Winston logging package to track the logs.

• Create folder called 'loggingutility' inside PageObjectModel_CherCherTech folder
• Create a file called winstonutility.ts
• Create a class called Logger inside the winstonutility.ts file
• We should use the 'logger' static variable present in the Logger class to log the comment
• I suggest reading the full tutorial on Logging with Winston in protractor typescript

import {createLogger, format, transports} from 'winston'
export class Logger{
    static logger = createLogger({
        level: 'info',
        format: format.simple(),
        transports: [
        // - Write to all logs with level `info` and above to `combined.log`
        new transports.File({ filename: 'combined.log'}),
				// - Write all logs error (and above) to Console/terminal
        new transports.Console()
        ]
    });
}

The above logger will write the logs to console and files as well.

Test File and there is no change to the conf file

import { browser } from "protractor";
import { GoogleLib } from "../Lib/GoogleLib";
import { EXCELutility } from "../utility/excelutility";
import { Logger } from "../loggingutility/winstonutility";
let googleLib = new GoogleLib()
let excelutil = new EXCELutility();
let log = Logger.logger
describe("Page Object Model in Protractor",function(){
  browser.ignoreSynchronization = true; // for non-angular websites
  it("Search Google",function(){
    // logging using log methods
    log.log("warn", "warn message from test")
    browser.get("https://google.com")
    // logging using info() methods
    log.info("Opening Google webpage")
    excelutil.readExcel("test.xlsx", "Sheet1", 2, 1).then(function(searchTerm){
      // logging with log method
      log.log("info", "The value read from Excel is :"+searchTerm)
      console.log(searchTerm)
      googleLib.searchGoogle(searchTerm.toString())
    })
  });
});

Recommended Readings

• Package.json in Protractor
• Jenkins with Protractor
• Docker with Protractor
• Dropdowns in Protractor | Select Class
• Read/Write Excel files in Protractor | Typescript
• Read/Write CSV file in Protractor | Typescript
• Read/Write JSON files in Protractor | Typescript
• Properties file in Protractor

I am Pavankumar, Having 8.5 years of experience currently working in Video/Live Analytics project.