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.

Visualpath is the Leading and Best Software Online Training Institute in Hyderabad. Avail complete PlayWright Automation institute in Hyderabad PlayWright Automation Online Training Worldwide. You will get the best course at an affordable cost.

Attend Free Demo

Call on - +91-9989971070.

Visit Blog: https://visualpathblogs.com/

WhatsApp: https://www.whatsapp.com/catalog/917032290546/

Visit:   https://visualpath.in/playwright-automation-online-training.html