Find Web Elements by XPath in Playwright

 

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".

Suggested Posts:

1. File Upload in Playwright
2. File Download in Playwright
3. Playwright with JUnit
4. Handle IFrames in Playwright
5. Page Object Model in Playwright