Page Object Model in Playwright

In this article we will discuss how to implement page object model in Playwright. POM is the most widely used design pattern in test automation.

Contents :

· What is POM?

· Why do we need POM?

· Implementing POM in Playwright

What is POM?

POM — Page Object Model is a helper class created for every page in web application which will hold all the located elements as properties and its interactions as methods.

It is a design pattern can be used with any kind of framework like keyword-driven, Data-driven, hybrid framework, etc. The Page object is an object-oriented class which acts as an interface for the page of your Application under test. Page class contains web elements and methods to interact with web elements. While Automating the test cases, we create the object of these Page Classes and interact with web elements by calling the methods of these classes.

Why do we need POM?

In web application test automation, based on scenarios in every test case we need to locate elements and interact with them.

A page object represents a part of your web application. An e-commerce web application might have a home page, a listings page and a checkout page. Each of them can be represented by page object models.

Page objects simplify authoring by creating a higher-level API which suits your application and simplify maintenance by capturing element selectors in one place and create reusable code to avoid repetition.

Implementing POM in Playwright

Maintain Page Objects in a separate folder called /pages under project folder.

Application url : https://react-redux.realworld.io/

List of created Page Objects are,

LoginPage

HomePage

NewPostPage

PostViewPage

GlobalFeedPage

I have created a Page Object for LoginPage as below,

import { Page, Locator } from "@playwright/test"
export default class LoginPage {
    readonly page: Page
    readonly emailEl: Locator
    readonly pwdEl: Locator
    readonly loginBtn: Locator

    constructor(page: Page) {
        this.page = page
        this.emailEl = this.page.getByPlaceholder('Email')
        this.pwdEl = this.page.getByPlaceholder('Password')
        this.loginBtn = this.page.getByRole('button', { name: 'Sign in' })

    }
    async enterUsername(strUser: string) {
        await this.emailEl.type(strUser)
    }
    async enterPassword(strPwd: string) {
        await this.pwdEl.type(strPwd)
    }
    async clickLoginBtn() {
        await this.loginBtn.click()
    }
}

Here, I have created list of helper classes to hold page objects in Typescript which has properties, constructor and action methods.

This class have,

· Properties — as readonly variable which could be modified only inside a constructor and not from outside of the class. (helpful in static pages)

· Constructor — assign instance readonly variables by locating elements

· Action methods — corresponding methods for every action in the page.

Some of the scenarios in the application are,

Login into app before each scenario

Create a New Post

View list of created posts

View the selected Post details.

To implement login functionality, create a test method as

test.beforeEach(async ({ page }) => {
        await page.goto('/')
        const homePage = new HomePage(page)
        const loginPage = new LoginPage(page)
        await homePage.navigateToLogin()
        await loginPage.enterUsername(uName)
        await loginPage.enterPassword(pwd)
        await loginPage.clickLoginBtn()
    })

References :

Page object models | Playwright

TypeScript: Documentation — Object Types (typescriptlang.org)

GitHub Repo : https://github.com/A2ZTestAutomation/PW_POM_Samples.git