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 under 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

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

Step 2: Add Playwright dependency in POM.XML

<dependencies>
<dependency>
<groupId>com.microsoft.playwright</groupId>
<artifactId>playwright</artifactId>
<version>1.17.1</version>
</dependency>
</dependencies>

After adding dependency update the project

Step 3: Create 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 HomePage.java and LoginPage.Java under package com.saucedemo.pages
• Create HomeTest.java and LoginTest.java class under package com.saucedemo.tests

Step 5:

Under LoginPage.java 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;

import com.microsoft.playwright.Page;

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) {
this.page = page;

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

//Create methods

// Login into the application

public void loginIntoApplication(String email, String pass) {
enterUserName(email);
enterPassword(pass);
clickLoginButton();}

public void logoutApplication() {
clickOnHamburger();
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() {
page.click(clickLogin);}

public void clickOnHamburger() {
page.click(clickHamburger);

}public void clickOnLogout() {
page.click(clickLogout);}}

Step 6:

Under HomePage.java create the below methods

Create methods

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

package com.saucedemo.pages;

import com.microsoft.playwright.Page;

public class HomePage {

Page page;

// Locator — — — -

String productName_1 =”id=item_4_title_link”;

//initialize Page using constructor

public HomePage(Page page) {

this.page =page;}

//Method

public String productName() {

String productName = page.textContent(productName_1);

return productName;}}

Step 7:

Under LoginTest.java call methods that are created under LoginPage.java and HomePage.java

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.microsoft.playwright.Browser;
import com.microsoft.playwright.BrowserType;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
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();

@BeforeTest
public void setUp() {
page.navigate(“https://www.saucedemo.com/");
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() {
login.logoutApplication();

}

// Close the browser
@AfterTest
public void closeBrowser() {
browser.close();}}

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

Please follow … me… on medium. Coming soon with some more blogs on it.

/kp