Page Object Model with Playwright + Java

What is Playwright #

Playwright an end-to-end web automation tool is getting popular nowadays due to its advanced features such as auto-waiting of web elements before performing any action (click, fill, select, etc), testing in full isolation (incognito mode of browser), download and upload of files at ease, etc.

In this article, I have explained the core classes used to get started with the first Playwright script. Later I also explained how to create a framework using the Page Object Model and TestNG.

Playwright is an interface that provides a method to launch a browser instance (Chromium/Chrome/Firefox/WebKit).

Playwright playwright = Playwright.create();

A Browser is created via BrowserType.launch()

Browser browser= playwright.chromium().launch();

By default, Playwright launches the browser in headless mode. If you need to run in non-headless mode, you can disable headless mode by passing in a LaunchOption.

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

BrowserContext provides a way to operate multiple independent browser sessions.

BrowserContext browserContext=browser.newContext();

Now that we have the browser, we need to launch the website under test. To do so, we need Page class which provides methods to interact with a single tab in a browser.

Page page= browserContext.newPage();

navigate() method of Page Class helps to redirect to the requested URL.

page.navigate("http://google.com");

These steps help you launch the website under test which is nothing but a precondition to run any test in the framework. You may add all these details to a BaseTest and create test cases that should extend this class.

Let us start with the framework creation!

Framework creation #

For a Maven project, add the following dependencies:

<dependencies>
<dependency>
<groupId>com.microsoft.playwright</groupId>
<artifactId>playwright</artifactId>
<version>1.23.0</version>
</dependency>
<dependency>
<groupId>org.testng</groupId>
<artifactId>testng</artifactId>
<version>7.6.0</version>
</dependency>
</dependencies>

1. Create a package under src/main/java as “com.qa.base”. Under this package create a PlaywrightFactory class.

public class PlaywrightFactory {
Playwright playwright;
protected Page page;
Browser browser;
BrowserContext browserContext;
@Parameters({"appURL", "browserType"})
public Page getPage(String appURL, String browserType) {
playwright = Playwright.create();
switch (browserType) {
case "chrome":
browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setChannel("chrome").setHeadless(false));
break;
case "chromium":
browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
case "firefox":
browser = playwright.firefox().launch(new BrowserType.LaunchOptions().setChannel("chrome").setHeadless(false));
break;
case "safari":
browser = playwright.webkit().launch(new BrowserType.LaunchOptions().setChannel("chrome").setHeadless(false));
break;
default:
break;
}
browserContext = browser.newContext();
page = browserContext.newPage();
page.navigate(appURL);
return page;
}
}

This class takes 2 parameters from the testing.xml file as “appURL” and “browserType”. You may pass your requirement for these parameters in the testing.xml file.

2. Create testng.xml file

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE suite SYSTEM "https://testng.org/testng-1.0.dtd">
<suite name="Suite">
<parameter name="appURL" value="http://automationpractice.com/index.php"></parameter>
<parameter name="browserType" value="chrome"></parameter>
<test thread-count="5" name="Test">
<classes>
<class name="com.qa.testcases.PlayTest"/>
</classes>
</test> <!-- Test -->
</suite> <!-- Suite -->

3. Create a package under src/main/java as “com.qa.pages”. Under this package create a BaseTest class.

public class BaseTest {
protected Page page;
protected HomePage hp;
protected SearchPage search;
PlaywrightFactory play;
@BeforeClass
@Parameters({ "appURL", "browserType" })
public void setUp(String appURL, String browserType) {
play = new PlaywrightFactory();
page = play.getPage(appURL, browserType);
hp = new HomePage(page);
}
@AfterClass
public void tearDown() {
page.context().browser().close();
}
}

This class has two annotations @BeforeClass and @AfterClass having methods setUp() and tearDown() respectively. setUp() method launches the desired webpage under test before any test class is executed. teardown() method closes the browser after all the methods for a test class are executed completely.

4. Under “com.qa.pages” package, create two classes HomePage and SearchPage.

public class HomePage{
Page page;
private String search="input#search_query_top";
public HomePage(Page page) {
this.page=page;
}
public SearchPage search(String searchTxt) {
page.locator(search).fill(searchTxt);
return new SearchPage(page);
}
}

This class has page locators in the form of a String, required action methods, and a page constructor.

5. Finally create a package under src/main/test as “com.qa.testcases”. Under this package create a PlayTest class.

public class PlayTest extends BaseTest {
@Test(priority = 1)
public void verifyTitle() {
Assert.assertEquals(page.title(), "My Store");
}
@Test(priority = 2)
public void verifySearch() {
search = hp.search("dress");
page.keyboard().press("Enter");
Assert.assertEquals(search.getSearchText().trim().toLowerCase(), "\"dress\"");
}
}

This is a test class having test methods and assertions. This class should extend BaseTest to call setUp() and tearDown() methods before running any @Test method.

Run as testng.xml file as TestNG suite and see the result.

To get the complete code refer to my GitHub repository.