QA Automation Labs

Page Object Model with Playwright and JAVA


Page Object Model with Playwright and JAVA

What is Page Object Model (POM)?

Page Object Model is a design pattern commonly used in test automation that creates an object repository for web UI elements. It helps us to reduce code duplication and improves test maintenance.

We can break POM into two-part (PO+ M)

In POM we create objects of page class and by using this object we can interact with web elements and the method of page class.

In a Page Object Model, each page in the web application contains a corresponding Page Class which includes the Web Elements and the Methods which operate on those Web Elements.

POM using Playwright With Java

Pre-Condition :

  1. Eclipse IDE is installed Download from Here
  2. Java is installed Download from Here
  3. Maven is already installed in Eclipse Follow the steps attached here

Scenarios covered in this blog

  • Verify the title of the application before login
  • Login into the site
  • Verify the product
  • Click on Hamburger and Logout from the application

Steps to implement the above scenario using Playwright With Java

Step 1: Create Maven Project

Maven Project

We can see below project has been created with the Name “NewPlayWrightProject

Step 2: Add Playwright dependency in POM.XML



After adding dependency update the project

Step 3: Create the below packages for pages and tests class

  • Create package under src/main/java -> com.saucedemo.pages
  • Create package under src/test/java -> com.saucedemo.tests

Step 4: Create Pages

  • Create and LoginPage.Java under package com.saucedemo.pages
  • Create and class under package com.saucedemo.tests

Step 5: Create Method

Under create methods to login /verify product and logout from the site

Create methods under package com.saucedemo.pages

  1. verifyTitle();
  2. loginIntoApplication(String email, String pass);
  3. logoutFromApplication();

Other methods :

enterUserName(String email),enterPassword(String pass),clickLoginButton(),clickOnHamburger() and clickOnLogout()

package com.saucedemo.pages;


public class LoginPage {

Page page;

// Locator — — — –

String username = “id=user-name”;
String password = “id=password”;
String clickLogin = “id=login-button”;
String clickHamburger = “id=react-burger-menu-btn”;
String clickLogout = “id=logout_sidebar_link”;

// initialize Page using constructor

public LoginPage(Page page) { = page;

}public String verifyTitle() {
String title = page.title();
return title;}

//Create methods

// Login into the application

public void loginIntoApplication(String email, String pass) {

public void logoutApplication() {
clickOnLogout(); } // Logout from the application

public void enterUserName(String email) {
page.fill(username, email);}

public void enterPassword(String pass) {
page.fill(password, pass);}

public void clickLoginButton() {;}

public void clickOnHamburger() {;

}public void clickOnLogout() {;}}

Step 6: Create methods

Under create the below methods

  • productName(); //To verify the product name in the site

package com.saucedemo.pages;


public class HomePage {

Page page;

// Locator — — — –

String productName_1 =”id=item_4_title_link”;

//initialize Page using constructor

public HomePage(Page page) { =page;}


public String productName() {

String productName = page.textContent(productName_1);

return productName;}}

Step 7: Call Created Methods

Under call methods that are created under and

package com.saucedemo.tests;

import org.testng.Assert;

import org.testng.annotations.AfterTest;

import org.testng.annotations.BeforeTest;

import org.testng.annotations.Test;





import com.saucedemo.pages.HomePage;

import com.saucedemo.pages.LoginPage;

public class LoginTest {

LoginPage login;

HomePage home;

Playwright playwright = Playwright.create();

BrowserType firefox = playwright.firefox();

Browser browser = firefox.launch(new BrowserType.LaunchOptions().setHeadless(false));

Page page = browser.newPage();


public void setUp() {


home = new HomePage(page);

login = new LoginPage(page);


// Verify title before login

@Test(priority = 1)

public void verifyPageTitle() {

String title = login.verifyTitle();

Assert.assertEquals(title, “Swag Labs”);


// Login into the application

@Test(priority = 2)

public void loginIntoTheApplication() {

login.loginIntoApplication(“standard_user”, “secret_sauce”);


// Verify product name after login

@Test(priority = 3)

public void verifyProductsName() {

String productName = home.productName();

Assert.assertEquals(productName, “Sauce Labs Backpack”);


// Logout from application

@Test(priority = 4)

public void logoutFromApplication() {



// Close the browser


public void closeBrowser() {


Run Test cases

Run the test case as “TestNg Test”

In the below screenshot we can see all test cases are passed

Html report is attached below

VIDEO for the above steps

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Let’s Play with Cypress Feature “Test Replay”

Problem Statement Before Cypress v13, test failures in CI have historically been captured through screenshots, videos, and stack trace outputs, b
Read More

Handling Shadow DOM Using Cypress

The idea of componentization has completely changed how we design and maintain user interfaces in the field of web development. The advent of Shadow D
Read More

Gear up for upcoming Conferences of 2024! ✨✨

Gear up for our upcoming Conferences of 2024! ✨ ✨ #TheTestTribe #SoftwareTesting #Testers #Community #Worqference #Worqference2024 #QonfX 
Read More