TLDR;
This video tutorial provides a comprehensive guide to using XPath locators in Playwright for web automation. It covers the basics of XPath, including absolute and relative paths, and explains why Playwright recommends CSS or Playwright-specific locators over XPath. The video also explores various XPath functions and methods, such as contains, starts-with, text(), and last(), and demonstrates how to handle dynamic elements using XPath. Additionally, it discusses how to locate single and multiple web elements and extract text content.
- Introduction to XPath locators and their role in web automation.
- Explanation of absolute and relative XPath and their differences.
- Demonstration of various XPath functions and methods for locating elements.
- Guidance on handling dynamic elements using XPath.
- Comparison of XPath with CSS and Playwright-specific locators in terms of performance and stability.
Introduction to XPath [0:03]
The video introduces XPath (XML Path) as a query language for navigating XML documents, which is used in web automation to locate elements on a webpage. Although Playwright recommends using CSS or Playwright-specific locators, understanding XPath is valuable, especially for those familiar with Selenium. XPath works on the DOM (Document Object Model), where each HTML tag is a node. When a webpage is loaded, the browser creates a DOM structure, and XPath expressions are used to traverse this structure to find specific elements based on their attributes and relationships.
Absolute vs. Relative XPath [2:07]
The video explains the two types of XPath: absolute and relative. Absolute XPath, also known as full XPath, specifies the complete path from the root of the DOM to the element, starting with a single slash (/). It navigates through every node in the DOM hierarchy. Relative XPath, or partial XPath, starts with a double slash (//) and directly jumps to the element using attributes, without traversing the entire DOM. Relative XPath is generally preferred because it is less susceptible to changes in the DOM structure.
XPath Options and Examples [7:38]
The video demonstrates how to write XPath expressions using various options and examples on a webpage. It explains how to open the DOM structure using browser developer tools and use the search box to test XPath queries. The video also introduces SelectorHub, a tool that automatically generates XPath expressions. It covers writing absolute XPath by navigating through each node and relative XPath using attributes like alt and src. The tutorial also shows how to use multiple attributes with AND and OR operators to refine the search.
XPath with contains Method [33:34]
The video explains how to use the contains method in XPath to locate elements by specifying a substring of an attribute value. This is useful for dynamic elements where the attribute value changes. The syntax involves using contains(@attribute, 'substring'). The video demonstrates how to locate elements with a partial string match in the href attribute, specifically finding elements containing the word "computer". It also shows how to combine this with tag names to narrow down the search.
XPath with Multiple Elements [38:33]
The video explains how to capture multiple elements using XPath and store them in a variable. It emphasizes that the page.locator method returns a locator type, regardless of whether it matches a single or multiple elements. The count method is used to determine the number of elements matching the XPath. The video also discusses how to handle strict mode violations, which occur when trying to perform a single action on multiple elements. It demonstrates how to extract text content from specific elements using first, last, and nth methods, and how to iterate through multiple elements using allTextContents to extract text from all matched elements.
XPath with starts-with Method [1:04:11]
The video explains how to use the starts-with method in XPath to locate elements where the attribute value starts with a specific string. This is useful when the beginning of the attribute value is consistent. The syntax is starts-with(@attribute, 'start_string'). The video demonstrates how to find elements with href attributes that begin with "/build". It also reiterates the difference between contains and starts-with, noting that contains matches a substring anywhere in the attribute, while starts-with requires the attribute to begin with the specified string.
XPath with Text Function [1:10:26]
The video explains how to use the text() function in XPath to locate elements based on their inner text. The syntax is text()='value'. It also discusses the use of normalize-space() to ignore leading and trailing spaces in the text. The video demonstrates how to locate a "register" link using the text() function and how to verify its visibility. It also compares the text() function with Playwright's getByText method.
XPath with Last and Position Functions [1:15:52]
The video explains how to use the last() function to select the last element in a set of matching nodes. It also covers how to use the position() function to select elements based on their position. The video demonstrates how to locate the last item in a list of followers and how to extract text content from specific elements using these functions.
Handling Dynamic Elements with XPath [1:27:12]
The video explains how to handle dynamic elements using XPath, where attributes change dynamically. It suggests using the OR operator, contains, starts-with, or the text() function to create flexible XPath expressions. The video demonstrates how to handle a button that toggles between "start" and "stop" states by using an XPath expression that matches either state. It also shows how to achieve the same result using CSS and Playwright-specific locators, emphasizing that Playwright-specific locators are generally preferred for their stability and speed.