Introduction to Page in Playwright

Playwright is a powerful library for automating web browser interactions, and one of its key features is the Page interface. This article will discuss the Page interface of Playwright in detail and how it can be used to create robust and reliable automated tests.

The Page in Playwright represents a single browser tab or window. Each Page is associated with a single browser context and can be used to navigate to multiple pages within that context.

Declaration of the Page

public interface Page extends AutoCloseable

We can see this from the declaration that Page is an interface extending another interface, “AutoCloseable”.

If Page is an interface, then which class implements the Page interface?

The answer is PageImpl class. It implements the methods declared by the Page interface.

Declaration of the PageImpl class

public class PageImpl extends ChannelOwner implements Page

Creating a new Page

As we said, a page represents a single browser tab or window, thus becoming a building block for automating test cases. So, how can we open or create a page in playwright?

Syntax of creating a page

browser.newPage()

or

browser.newContext().newPage()

Above line will create a page that can interact with the webpage and perform various actions.

Here is the whole code

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

public class CodekruTest {

	public static void main(String[] args) {

		Playwright playwright = Playwright.create();
		Browser browser = playwright.chromium().launch(); // Creating a "Browser" instance

		Page page = browser.newContext().newPage(); // Creating a new page

		// closing the instances
		browser.close();
		playwright.close();
	}

}

Navigating to a URL

After creating the Page object, we can now navigate to a URL using the page.navigate() function. We would only have to pass the URL, and the page will be navigated to it.

page.navigate("url");

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

public class CodekruTest {

	public static void main(String[] args) {

		Playwright playwright = Playwright.create();
		Browser browser = playwright.chromium().launch(); // Creating a "Browser" instance

		Page page = browser.newContext().newPage(); // Creating a new page

		page.navigate("https://testkru.com/Elements/TextMessages");

		// closing the instances
		browser.close();
		playwright.close();
	}

}

Locating elements in the Page

After navigating to a URL, one might have to locate an element and perform operations like clicking, entering text, etc. The Page interface provides us with various ways to locate an element.

• page.locator()
• page.getByAltText()
• page.getByLabel()
• page.getByPlaceholder()
• page.getByRole()
• page.getByTestId()
• page.getByText()
• page.getByTitle()

We can use the above methods to locate an element based on our requirements.

Let’s locate the below-highlighted element using the XPath and the locate() function. The element is present on the Url – https://testkru.com/Elements/Buttons.

Inspect the highlighted element, and it will open up the developer tools where we can see the DOM.

We can see the id attribute’s value is “leftClick“. So, the Xpath for the element can be written as “//button[@id=’leftClick’]“.

page.locator("//button[@id='leftClick']")

Above line of code will locate the element with the specified XPath.

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.Locator;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;

public class CodekruTest {

	public static void main(String[] args) {

		Playwright playwright = Playwright.create();
		Browser browser = playwright.chromium().launch(); // Creating a "Browser" instance

		Page page = browser.newContext().newPage(); // Creating a new page

		page.navigate("https://testkru.com/Elements/Buttons");

		Locator buttonLocator = page.locator("//button[@id='leftClick']");

		System.out.println(buttonLocator.innerText());

		// closing the instances
		browser.close();
		playwright.close();
	}

}

Output –

Left click on me

List of Page methods in Playwright

The Page interface provides many methods. Some of them are listed below –

We hope that you have liked the article. If you have any doubts or concerns, please write to us in the comments or mail us at admin@codekru.com.