Automation, BDD, Behaviour Driven Development, cucumber, gherkin, npm, protractor, Selenium

Implementing page object model using protractor and typescript

Before we dwell on some facts let us step back and understand why I am actually writing this blog. As we understand with this rapid growth not only the developers but we Automation Test Engineers are also constantly grooming ourselves by learning new stuff.

Be it a new programming language or a scripting language we have to widen our thoughts. So while thinking of creating a new automation framework now we are discussing things like handling promises, synchronization, infrastructures, continuous testing, continuous integration, version control, etc

In one of the recent project, I have created a framework in which we picked new tech stack in contrast to the one which is widely used (Yes, I am talking about Java+ Eclipse + TestNg.)

Let’s go deep dive and understand what all I have done for automating an application for which Frontend is written in Aurelia and Backend in C#

What is Protractor?

Protractor, a wrapper on top of Selenium Webdriver can help us a lot.

  • End-to-end testing framework for web applications and built on top of WebDriverJS.
  • Uses the Jasmine framework for its syntax as the default framework.
  • Node.js program.

How to work with Page Objects?

It works similar to the real concept of Page object where you are creating new classes for each page and place all the objects locators in class here.


But How to work with classes? Example of page class


Ok, but what is BasePage?

export class BasePage {
textbox = new TextBox();
click = new Click();
scrollpage = new ScrollPage();

public openHomeLink() {

* Converts a date to a string using the specified formatting.
* @default
* format is ‘dd/mm/yyyy’
static toDateString(date: Date, format: string=”dd/mm/yyyy”) {

// Integer value representing the year
const year = date.getFullYear();
// Integer value representing the month, beginning with 0 for January to 11 for December
const month = date.getMonth() + 1;
// Integer value representing the day of the month.
const day = date.getDate();

if(format == “mm/dd/yyyy”) {
return month + “/” + day + “/” + year;
} else if(format == “yyyy/mm/dd”) {
return year + “/” + month + “/” + day;
return day + “/” + month + “/” + year;

* Returns the random number.
static generateRandomNumber() {
return Math.floor(Math.random() * 20) + 1;

* Returns the random date between the specified start and end date
static generateRandomDate(start: Date, end: Date) {
return new Date(start.getTime() + Math.random() * (end.getTime() – start.getTime()));

Example of page object class

import { element, by } from “protractor”;

export class AddVendorOR {
static headerAddVendor = element(by.css(“div.banner-title.white.p-sm”));
static inputVendorName = element(by.xpath(“//div[div[select[@id=’criticality’]]]/preceding-sibling::div//input[@ref=’inputElem’]”));
static selectCriticality = element(“criticality”));
static selectThirdFourthParty = element(by.xpath(“//select[@value.bind=’selectedThirdOrFourthVendorType’]”));

Summing it up, it’s all about the way you want to mold the project into. And no bar to the language you are using. Here I have used typescript with Jasmine in protractor.

You can implement BDD using cucumber as well with the same concept which Cucumber follows.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s