Playwright Page Object Model

In this article, we will learn about the page object model and how it is implemented in Playwright.

What's Page Object Model/POM?

Also commonly known as POM, it is a design pattern that stores web elements as a repository in a separate class file.
Each class file contains separate web page elements. In short terms, web pages are separated into each class file as shards and automated.

Pros:

Easy to maintain as each class file have different locators for different pages.
It can be used again for another test with a custom helper method, so this has increased reusability.
As all tests are separated into shards, readability is good.

Cons:

It takes time to build the framework initially.
A good understanding of code is required for POM.
A tiny miscalculation can destroy the whole test suite, as the elements are stored in a shared file.

POM In Action:

Let us create a separate class file for a login page from programsbuzz.

Playwright Page Object Model

1.) Setup

Create a folder with any name at the project level.
Create a .js file named LoginPage for easy understanding.

2.) Class File Setup

class LoginPage 
{
    constructor(page)
    {
       this.page = page;
       this.userName = page.locator("#edit-name");
       this.passWord = page.locator("#edit-pass");
       this.clickLogin = page.locator('//form[@id="user-login-form"]//input[@id="edit-submit"]');
   }
   
   async goTo()
   {
       await this.page.goto("https://www.programsbuzz.com/user/login");
   }
   
   async login(username,pass)
   {
       await this.userName.type(username);
       await this.passWord.type(pass);
       await this.clickLogin.click();
   }
}
module.exports = {LoginPage};

Create a class with the same name as the file name.
Create a constructor within it.
When a constructor is created, and a variable is created within it attached to 'this,' it is called a class variable so that it can be accessible.
Inside the constructor, pass in the locators of our login page's username field, password field, and a login button.
Also, let it know that this.page is equal to the page, which means that it is the page we will traverse.
Methods for visiting the URL and login are created for adding actions.
Finally, create an export module to let the project know that this class can be imported anywhere.

3.) Test

const {test, expect} = require('@playwright/test');
const{LoginPage} = require('../Pages/LoginPage');

test('ElementHandle', async ({page})=> 
{
    const name = "Naruto";
    const loginPassword = "SHazam";
    const lp = new LoginPage(page);

    await lp.goTo();
    await lp.login(name, loginPassword);
});

Now that the class file is created, import the class file LoginPage in our test.
Create an object for the class before beginning.
Now, all methods from a class file can be accessed using lp.
Remember to use await before the object.

Conclusion:

This is what it takes to create a simple POM structure in Playwright using Javascript.