Page Object Model in Playwright

The Page Object Model (POM) is one of the most common and widely used design patterns in automation testing. In POM, each web page of the application is represented as a separate class, and all user actions on that page are written as methods inside that class. This approach keeps test logic and page logic separate, making tests easier to read, maintain, and scale.

For better understanding, we are going to write a login test using the Page Object Model in Playwright JS.

Page Object Model Strcture

Example: Login Page using Playwright

A typical login page contains:

- Username input field
- Password input field
- Login button
- Forgot password link
- Sign-up link

In POM, we create a LoginPage class, and each user action is implemented as a method.

Example Code: LoginPage.js

export class LoginPage {
constructor(page) {
this.page = page;

// Locators
this.usernameInput = page.locator('#username');
this.passwordInput = page.locator('#password');
this.loginButton = page.locator('#login');
}

async navigate() {
await this.page.goto('https://example.com/login');
}

async enterUsername(usernameText) {
await this.usernameInput.fill(usernameText);
}

async enterPassword(passwordText) {
await this.passwordInput.fill(passwordText);
}

async clickLogin() {
await this.loginButton.click();
}
}

Code explanation

- page is passed through the constructor
- Locators are defined once inside the page class
- Each user action is written as a reusable method
- Playwright automatically waits for elements before performing actions

Now, we are going to use the methods written in the LoginPage.js class to write tests in LoginTests.spec.js.

Example Code: LoginTests.spec.js

import { test } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

test.describe('Login Page Tests', () => {
let loginPage;

test.beforeEach(async ({ page }) => {
loginPage = new LoginPage(page);
await loginPage.navigate();
});

test('valid username test', async () => {
await loginPage.enterUsername('john_doe');
});

test('invalid username test', async () => {
await loginPage.enterUsername('invalid_user@123');
});

test('empty username test', async () => {
await loginPage.enterUsername('');
});
});

This is how Page Object Model used here,

The same method from loginPage.js: await loginPage.enterUsername('john_doe');

is reused across:

- Positive test cases
- Negative test cases
- Edge cases

If the locator changes in the future, you need to update it only once in LoginPage.js. No changes are required in the test files.

The enterUsername method in the LoginPage class is used for both positive and negative test cases by passing different input values. This makes the tests more flexible and easier to maintain

Advantages of Page Object Model

- Avoids code duplication (one method for both positive and negative cases)
- Enables easy maintenance (locator changes require updates in only one place)
- Allows better grouping of tests
- Improves readability
- Makes debugging faster

Page Object Model in Playwright

Related Tutorials

Related Tutorials

Page Object Model in Playwright

Related Tutorials

Related Tutorials

Subscribe