Xpath Vs CSS Selector in Java

When working with Selenium WebDriver in Java, two of the most commonly used locators are XPath and CSS Selectors. Both play a crucial role in identifying and interacting with web elements, such as buttons, links, and text boxes. Choosing the right locator strategy can make your Selenium test scripts more efficient and easier to maintain.

In this article, we will explore the differences between XPath and CSS Selectors in Java, their advantages, and when to use one over the other for web automation.

What is a Locator?

A locator is a string of information used when trying to locate a particular element in a webpage. In Selenium, the XPath and CSS Selectors are the ways, how we select the buttons, text boxes, links etc. everywhere. Locators make certain that these automations can interact with such elements in some way – click on them, type something into them, or check text on these elements.

What is XPath?

XPath (XML Path Language) is [a tool for] selecting elements and attributes of an XML or HTML document. In Selenium we typically uses it to find elements based on where they are in the DOM tree of the page.

1. Absolute XPath

Absolute XPath defines the full path from the root element of the HTML document to the target element. It starts with a single forward slash (/), indicating the topmost element of the DOM.

Example

/html/body/div[1]/div[2]/a

Advantages:

• It gives an exact location of the element in the DOM structure.

Disadvantages:

• It is brittle. Any change in the structure will break the locator, making it less maintainable.

2. Relative or Dynamic XPath

Relative XPath starts from anywhere in the document, making it more flexible. It uses a double forward slash (//), which allows us to search for elements without specifying the complete path.

Example

//a[@id='submit']

Advantages

• It is less brittle and more maintainable since it doesn't depend on the full DOM path.
• It allows for more flexibility and dynamic searching.

XPath Axes

XPath Axes are used to navigate to elements based on their relationship with other elements in the DOM.

Common axes include:

• ancestor: Selects all the6 nodes which are in one hierarchical level up above the current selected node.
• child: Refines the current view and returns all the children to the current level node.
• following: Selects all nodes in the SSML after the selected node, the node to its right.
• parent: Picks the parent node of the present node.
• preceding-sibling: Selects all its siblings starting from the preceding node of the current node.

Basic XPath Expressions and Their Meaning

• Tag Name: For instance, //tagName accesses all elements with the required tag name.
• Attribute Value: Tag [tagName] selects elements with attribute equals value.
• Contains: //*[contains(text(),'Submit')] selects elements that have what is stated inside it as text.

Advantages of XPath

1. XPath has the great flexibility in querying, where many axes filters and conditions are available.
2. Both forward and backward navigation in the DOM composition is possible through the same.
3. XPath is particularly effective in cases where there are dynamic attribute changes: therefore, it is very reliable in the identification of elements.

Disadvantages of XPath

1. Compared to CSS Selectors it is usually slower, mainly because of the complexity of the expression language used.
2. The syntax is more verbose, rather complex and not very easy to understand.
3. Absolute XPath is brittle as any changes in the actual structure of the DOM can prove to be destructive to the locator.

How to Create an XPath?

1. Inspect the element in the browser.
2. Right-click on the element and select "Copy XPath" (for basic XPath).
3. For more complex XPath, manually construct the query using the structure of the DOM.

How to Check the Correctness of the XPath Expression in the Browser?

In Chrome or Firefox, use the browser's developer tools:

1. Press F12 to open the developer tools.
2. Navigate to the "Elements" tab.
3. Use Ctrl + F to bring up the search bar, and input the XPath. If it highlights the correct element, your XPath is valid.

What are CSS Selectors?

CSS Selectors are regular expressions that are used to obtain and format specific tag by attributes, class, id or even their relative position on the DOM tree. While performing the test automation, CSS Selectors are used to locate the web elements.

Types of CSS Selectors

1. Tag Selector: tagName chooses all the elements of specified tag.
2. Class Selector: className selects elements and knows that they has a particular class.
3. ID Selector: The selectors #id is to select elements with the specified ID.
4. Attribute Selector: tagName[attribute=’value’] filters by attribute and the value that the attribute has.
5. Descendant Selector: It targets elements which are descendants of a parent element, and are selected using parent child.
6. Pseudo-classes: :nth-child() targets elements according to their position in relation with other elements.

Advantages of CSS Selectors over XPath

1. In most cases CSS Selectors are faster compared to XPath because browsers have optimized for CSS Selectors.
2. Which provide short, clear and easily analyzable sentences.
3. CSS Selectors are less likely to be affected when the Domain Object Model structure is revised.
4. CSS Selectors are well supported natively in all the browses currently in use and have very good performance.

Disadvantages of CSS Selectors over XPath

1. CSS cannot traverse back up the DOM, which means that parent or ancestor selections are not possible.
2. CSS Selectors may not be as flexible or powerful as XPath when dealing with complex locators.

How to Create CSS Selectors?

1. Inspect the element in the browser.
2. Right-click on the element and select "Copy Selector" for a basic CSS Selector.
3. Customize the CSS Selector by adding attributes, classes, or other conditions.

Differences between XPath vs CSS Selector

Which is the Best: XPath vs CSS Selector?

As far as I am concerned, there is no question of which one is better than the other, it all depends on the requirements of the application in question. While CSS Selectors are quicker and should be used wherever possible, XPath is more versatile especially while dealing with a large DOM tree.

XPath vs CSS Selector for Test Automation

• Use XPath when you need to look for some elements in both directions, or if you dealing with the dynamic attributes.
• Applicable when optimization is core to the system design since the elements can be easily located suing class, ID other static values.

Conclusion

In conclusion, both XPath and CSS Selectors have their unique strengths when it comes to web automation using Selenium in Java. CSS Selectors are faster and simpler, making them ideal for straightforward element selection. However, XPath provides greater flexibility, especially for navigating complex DOM structures.

Understanding when to use XPath versus CSS Selectors can greatly enhance the efficiency and maintainability of your test scripts.