Page Object Model with Playwright: Tutorial

As web applications grow more complex, writing maintainable test automation is crucial. The Page Object Model (POM) design pattern offers a structured approach to organizing test code. Combined with Playwright, POM provides efficient and scalable automation.

This article explores the Page Object Model (POM) in Playwright, including its benefits, drawbacks, and a step-by-step guide to implementation.

What is a Page Object Model?

Popularly known as POM, the Page Object Model is a design pattern that creates a centralized repository for storing web elements. It helps reduce code duplication and improves the maintainability of test scripts.

In Page Object Model, each web page of an application is represented as a separate class. These classes contain only the elements specific to their respective pages, along with methods to interact with them. Testers use these page objects to perform actions on the application, keeping tests clean and organized.

What is Page Object Model in Playwright?

Page Object Model in Playwright is a design pattern used i to create a structured approach for managing interactions with web pages.

Advantages of Page Object Model in Playwright

Here are the key advantages of using the Page Object Model in Playwright:

• Easy Maintenance: Since web automation relies heavily on the DOM structure and selectors, the Page Object Model simplifies maintenance. Changes in the DOM or selectors require updates only in the page object, avoiding modifications across multiple test scripts.
• Increased Reusability: POM promotes code reuse by allowing test scripts to share common page interactions. Custom helper methods can be created within page objects to reduce redundant code further, saving time and effort.
• Improved Readability: By keeping tests independent and focused, the model enhances the clarity and readability of test scripts.
• Reduced Code Duplication: Encapsulating common page actions within page objects prevents repetitive code, enabling multiple tests to reuse the same methods.
• Better Test Management: Organizing related elements and actions within dedicated page objects results in a more structured and manageable test suite.
• Enhanced Debugging: Clear separation of page logic provides better traceability. When a test fails, identifying and fixing issues is easier within the specific page object rather than searching through multiple test files.

Disadvantages of Page Object Model in Playwright

While the Page Object Model offers many benefits, it also comes with some drawbacks to consider:

• Initial Setup Time: Initial design and building framework take some time.
• Advanced Skillset: Good coding skills are required to set the POM framework
• Higher Risk: Elements are stored in a shared file, so even a tiny mistake in the page object file can lead to breaking the whole test suite.
• Increased Complexity: For simple applications or small test suites, the POM can introduce unnecessary complexity by requiring additional classes and methods.
• Tight Coupling of Interdependencies: If page objects are not well-designed, they can become tightly coupled, making it difficult to modify one without affecting others.
• Limited Flexibility: The rigid structured nature of POM can make it harder to adapt to new testing strategies or tools without significant rework.

Implementing Page Object Model in Playwright

Here are the prerequisites and steps to effectively implement the Page Object Model in Playwright:

Pre-Requisites:

1. Install Visual Studio Code: Download and Install Visual Studio Code(VSCode).
2. Install NodeJS: Download and Install Node JS

Steps to get started with Page Object Model in Playwright

Follow these steps get started with the POM in Playwright:

Step 1: Create a fresh new directory (ex: PlaywrightDemo) in VSCode

Step 2: Open Directory in Visual Studio Code. From VS code

Click on File > Open Folder > Choose newly Created Folder (PlaywrightDemo)

Step 3: From the VS Code, Click on Terminal Menu > Click on New Terminal

Step 4: Enter the below command to start the Playwright installation

npm init playwright@latest

Note: The above command asks a set of questions. Please provide appropriate inputs. In this tutorial, you are using typescript language.

Once you run the above command, the below set of files and folders will be automatically created

• tests folder: This folder contains actual test scripts. By default, an example.spec.ts file will be created inside this folder.
• .gitignore: This file helps if you are using git repository
• package.json and package-lock.json: This file helps to track dependencies, create a shortcut for running tests, etc.
• playwright.config.ts: This is the global configuration file for the Playwright, which you can configure with available options.

Set up/Add additional folders for Playwright page object model

• pages folder: Since the POM pattern is being used, the pages folder contains all the relevant page objects.
• utility folder: The common code/function, which can be used in different tests can be placed here. For example, generating a random number, getting a date and time, etc.

Step 5: Install Browsers

Install browsers using the command

npx playwright install

Once you complete the above steps, your Playwright Test Automation Project/ Framework should look like the below.

Here is a simple scenario.

Navigate to the Browserstack home page.

Click on Products Menu

Verify All Submenus are Present

Step 6: Create a page object file inside the pages folder and name it home.page.ts

To achieve the above flow, you need a URL, menu element, etc.

//home.page.ts
import { expect, Locator, Page } from '@playwright/test';
export class BrowserstackHomePage {
readonly url ="https://www.browserstack.com/";
readonly page: Page;
readonly browserstackLogo: Locator;
readonly productsMenu: Locator;
readonly productmenudropdown:Locator

constructor(page: Page) {
this.page = page;
this.browserstackLogo = page.locator('#logo');
this.productsMenu = page.locator('#product-menu-toggle');
this.productmenudropdown = page.locator('#product-menu-dropdown >div > ul >li >a >div[class="dropdown-link-heading"]');
}

async goto(){
await this.page.goto(this.url);
}
async clickOnProducts(){
await this.productsMenu.waitFor({state:"visible"});
await this.productsMenu.click();
}
}

Step 7: Create a test using the above page object file.

Create a test file inside the tests folder and name it home.test.ts

To create a test, you need to import the page object file. Like below.

import { BrowserstackHomePage } from '../pages/home.page';

Once you import, you need to write the script and verify the submenus.

// home.test.ts
import { test, expect } from '@playwright/test';
import { BrowserstackHomePage } from '../pages/home.page';
test('Browserstack homepage verification', async ({ page }) => {
const homepage = new BrowserstackHomePage(page);
await homepage.goto();
await homepage.clickOnProducts();
await expect(homepage.productmenudropdown).toContainText(["Live", "Automate", "Percy", "App Live", "App Automate"])
});

After the creation of the above test file, your project looks like below

Step 8: Execute your test.

Execute you are using the below command

npx playwright test

Talk to an Expert

By default Playwright test runs in headless mode, to run in headed mode use -– headed flag.

npx playwright test -–headed

Now that you have the tutorial in place, know that Playwright is supported by Browserstack which provides thousands of real devices where you can verify applications on real devices. A few advantages of Playwright are:

• Easy Setup and Configuration
• Multi-Browser Support
• Multi-Language Support
• Parallel Browser Testingomes in handy when multiple web pages have to be tested simultaneously.
• Built-in Reporters:
• Typescript Support out of the box
• CI/CD Integration Support
• Debugging Tools Support

Using Browserstack Integration with Playwright you can integrate our Playwright tests and make automation testing easier through robust design patterns. Not only that, speed up your Playwright tests by 30x with parallel testing to expand your test and browser coverage without compromising on build times.

Run Playwright Tests On BrowserStack

Conclusion

The POM or Page Object Model is a powerful design pattern that significantly improves the maintainability, readability, and scalability of Playwright test automation. By organizing page elements and actions into dedicated classes, it reduces code duplication and simplifies updates when application interfaces change.

Integrating Playwright tests with BrowserStack Automate further enhances automation efficiency by combining robust design patterns with a seamless cloud infrastructure. BrowserStack offers access to thousands of real devices and browsers, ensuring comprehensive test coverage across multiple platforms.

Features like parallel testing accelerate execution without compromising speed, while built-in debugging tools and detailed test reports facilitate faster issue identification and resolution. Support for CI/CD pipelines enables continuous testing and quicker delivery cycles, making Playwright automation more scalable and reliable.

Adopting this approach empowers teams to build resilient test suites that scale effortlessly with evolving web applications.