XPath Locators

XPath is a query language used to locate elements in XML and HTML documents based on their structure and attributes. In Selenium, it helps identify web elements for actions like clicking, typing, and validation, especially on dynamic web pages.

• Traverses DOM using paths and attributes to find elements
• Works well when elements lack stable identifiers like ID or name
• Supports advanced search using functions such as contains() and starts-with()

Key Features of XPath

• Navigation: XPath allows navigation through elements in a hierarchical XML or HTML structure.
• Flexibility: You can locate elements based on various attributes (like id, class, name, etc.) or even based on the text content.
• Powerful Queries: XPath supports powerful queries, making it more versatile compared to CSS selectors in many scenarios.

Types of XPath

There are two types of XPath that can be used in Selenium:

1. Absolute XPath

Absolute XPath starts from the root element of the HTML document. It defines the complete path to locate the element starting from the root node.

Example: /html/body/div/div[2]/div[1]/button

• Pros: Simple and easy to understand for small documents.
• Cons: Fragile and prone to breakage if any changes are made in the hierarchy of the document (e.g., adding or removing nodes).

2. Relative XPath

Relative XPath starts from anywhere in the document and can be shorter and more flexible. It is based on a specific element's attributes, text, or position within the hierarchy.

Example: //button[@id='submit']

This XPath will find a button element with an id attribute equal to submit.

• Pros: More flexible and less prone to breakage, and can locate elements using attributes or dynamic values.
• Cons: Can be more complex for very dynamic or nested structures.

XPath Syntax and Expressions

XPath syntax is used to define the path of elements in an XML/HTML document and to locate nodes based on attributes, structure, or text.

1. Basic XPath Syntax

• //: Selects nodes anywhere in the document, regardless of the location.
• /: Selects nodes directly under the current node (absolute path).
• @: Selects an attribute of a node.

Example:

//input[@name='username']

This XPath selects an input element with the name attribute equal to username.

2. Predicates

Predicates are used to filter nodes based on conditions. They are placed inside square brackets [].

Example:

//div[@class='container'][2]

This selects the second div element with the class container.

3. Axes

Axes in XPath help navigate through elements based on their relationship with other elements. Some common axes are:

• parent: Selects the parent of the current node.
• child: Selects child elements of the current node.
• descendant: Selects all descendants (children, grandchildren, etc.) of the current node.

Example:

//div[@id='content']/parent::div

This selects the parent div of the div with id='content'.

Common XPath Functions

XPath functions allow more advanced querying capabilities. Some commonly used functions are:

text(): Selects elements by their visible text.

Example:

//a[text()='Login']

This will select an anchor tag with the text "Login".

contains(): Selects elements that contain a specific attribute or text.

Example:

//button[contains(@class, 'submit')]

starts-with(): Selects elements where an attribute's value starts with a specific string.

Example:

//input[starts-with(@id, 'user')]

Best Practices for Writing XPath

Writing efficient XPath helps create stable and maintainable automation scripts in Selenium.

• Use relative XPath instead of absolute XPath for better flexibility
• Avoid index-based XPath as it breaks easily when the DOM changes
• Prefer contains() and starts-with() for handling dynamic elements
• Use unique attributes like id or name instead of non-unique class values

Advanced XPath Examples

• //input[contains(@id,'user')] -> Selects elements whose id contains user.
• //button[starts-with(@class,'btn')] -> Selects buttons whose class starts with btn.
• //a[text()='Login'] -> Selects a link with exact text Login.
• //div[@class='box']//span -> Selects all span elements inside a div with class box.
• //input[@type='text' and @name='email'] -> Selects a text input field with name email.
• //ul/li[last()] → Selects the last list item inside a list.
• //table//tr[2]/td[1] -> Selects the first column of the second row in a table.
• //label/following-sibling::input -> Selects the input element next to a label.
• //span/parent::div -> Selects the parent div of a span element.
• //div[@class='container']/child::p -> Selects paragraph elements directly inside a container div.