Page Object Model (POM) in Playwright

Introduction

The Page Object Model (POM) is a design pattern that enhances test maintenance and reduces code duplication by creating an abstraction layer for web pages. In POM, web pages are represented as classes, and the various elements on the page are defined as variables within the class. Playwright, a Node.js library to automate web browsers, seamlessly integrates with POM to provide a robust framework for browser automation.

Setting Up Playwright

First, ensure you have Node.js installed. Initialize a new Node.js project and install Playwright using the following commands:  Playwright Training

bash

Copy code

npm init -y

npm install playwright

Creating a Page Object Model

Define the Page Class: Create a file for the page object, e.g., loginPage.js, and define the class representing the web page.   Playwright Online Training

javascript

Copy code

const { expect } = require('@playwright/test');

class LoginPage {

  constructor(page) {

    this.page = page;

    this.usernameField = page.locator('#username');

    this.passwordField = page.locator('#password');

    this.loginButton = page.locator('#loginButton');

  }

async navigate() {

    await this.page.goto('https://example.com/login');

  }

  async login(username, password) {

    await this.usernameField.fill(username);

    await this.passwordField.fill(password);

    await this.loginButton.click();

  }

}

module.exports = { LoginPage };

Write Test Scripts: Create a test file, e.g., loginTest.js, and import the necessary modules and the page object class.  Playwright Automation Training

javascript

Copy code

const { chromium } = require('playwright');

const { LoginPage } = require('./loginPage');

(async () => {

  const browser = await chromium.launch({ headless: false });

  const context = await browser.newContext();

  const page = await context.newPage();

const loginPage = new LoginPage(page);

  await loginPage.navigate();

await loginPage.login('testuser', 'password123');

  // Add assertions to verify successful login

  await expect(page.locator('#welcomeMessage')).toHaveText('Welcome, testuser!');

await browser.close();

})();

Advantages of POM in Playwright

Improved Readability and Maintenance: By separating page interactions from test scripts, POM makes the test code cleaner and more readable. Any changes in the UI require updates only in the corresponding page object, not in every test script.   Playwright with TypeScript Training

Reusability: Page objects can be reused across multiple tests, reducing code duplication and improving consistency.  Playwright Automation Online Training

Scalability: As the application grows, POM helps manage complexity by organizing code logically, making it easier to scale test automation efforts.