Tutorials123: Playwright XPath

In Playwright, XPath is one of the strategies used to locate web elements within a page. XPath (XML Path Language) is a query language designed for navigating through elements and attributes in an XML or HTML document. Since web pages are structured as HTML documents (which are tree-like in nature), XPath expressions can be used to traverse and identify specific elements.

Why XPath is Useful in Playwright

Precise Location: XPath can identify elements that do not have unique IDs, names, or other easy selectors.
Complex Relationships: It allows finding elements based on their relationship to other elements, such as parent, child, sibling, or ancestor.
Attribute-Based Selection: You can locate elements based on attributes, text content, or a combination of conditions.
Dynamic Content: Useful in scenarios where element attributes like id or class keep changing but relative positions remain consistent.

Types of XPath in Playwright

1. Absolute XPath: Starts from the root (/html/...) and provides the full path. It is very fragile because even a small change in the structure breaks it.

2. Relative XPath: Starts from a specific node (//div[@class='example']) and is more reliable and flexible.

How Playwright Uses XPath

Playwright internally supports multiple selector engines, and XPath is one of them.
When you specify an XPath, Playwright traverses the DOM tree to locate the element that matches the given expression.
Once found, the element can be interacted with (clicked, typed into, verified, etc.).

Advantages of Using XPath

Works even when there are no unique IDs or CSS selectors.
Can combine multiple conditions (like text + attribute).
Handles nested and hierarchical structures well.

Disadvantages

More complex and harder to read than CSS selectors.
Slower compared to CSS because it often scans the whole DOM.
Fragile if the DOM structure changes frequently.

In Playwright Java, you can find elements using XPath by using the locator() method with the XPath expression prefixed by "xpath=".

Example: Find an element by XPath in Playwright Java.

Let’s take https://example.com as the sample website and find the <h1> element using XPath.

import com.microsoft.playwright.*;

public class XPathExample {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
      Page page = browser.newPage();

      // Navigate to example website
      page.navigate("https://example.com");

      // Find element using XPath
      Locator heading = page.locator("xpath=//h1");

      // Print the heading text
      System.out.println("Heading: " + heading.textContent());
    }
  }
}

XPath Syntax Recap

//tagname: Selects all elements with the tag name.
//*[@attribute='value']: Selects elements by attribute.
//div[contains(text(),'Sample')]: Selects elements that contain specific text.

Another Example with Attribute XPath

Locator element = page.locator("xpath=//*[@id='username']");

This selects an element with the id="username".

Find Web Elements by XPath in Playwright

XPath Syntax Recap