Choosing the right locators to identify web elements is key to a robust automation testing framework. The locators are the foundation that supports the framework as it grows. Weak locators lead to flaky, unreliable tests that break with even small DOM changes.
Selenium offers several locators, but most debates focus on XPath vs CSS selectors. Both have pros and cons. CSS selectors are simpler and faster for basic HTML selection. XPath is more flexible and capable of handling complex, dynamic structures.
This article provides the technical details of XPath and CSS selectors.
Table of Contents
- What is Locator in Selenium?
- Different Locators in Selenium
- What is XPath?
- Types of XPath Locators
- Advantages of Using XPath Locators
- Disadvantages of using XPath Locators
- What are CSS Selectors?
- Advantages of CSS Selectors
- Disadvantages of CSS Selectors
- XPath vs. CSS selector
- Conclusion
What is Locator in Selenium?
A locator in Selenium tells Selenium which element on a webpage to interact with. Webpages comprise HTML elements like buttons, text boxes, images, etc. To automate interactions with these elements, Selenium needs a way to uniquely identify them.
Locators provide an address for Selenium to find a certain element on a page. Some examples of locators are:
- ID locator – locates an element by its unique ID attribute.
- Name locator – locates by the name attribute.
- CSS selector – locates by CSS properties.
- XPath – locates by traversing XML document structure.
Without locators, Selenium wouldn’t know which specific element to click on, enter text into, etc. Locators enable you to write scripts like “click the submit button” by providing a unique address for that button element. This allows full automation of web page interaction.
LambdaTest is an AI-powered test orchestration and execution platform for testing digital experiences on the web and mobile. It enables both manual and automated testing. LambdaTest provides access to an online Selenium Grid with over 3000+ real browsers and operating systems. This eliminates the hassle of setting up local grids for automation testing.
Different Locators in Selenium
When automating interactions with web applications using Selenium, we need to uniquely identify the elements on the page we want to interact with. Locators in Selenium serve this purpose – they allow us to target specific elements by different criteria.
The main locators available can be categorized into attribute-based locators and traversal-based locators.
Attribute locators find elements via attributes in the HTML markup:
- ID locator: Locates elements by their unique ID attribute. This tends to be the fastest and most reliable locator.
- Name locator: Finds elements by matching their name attribute. However, name attributes may not always be unique or available.
- Class name locator: Locates elements that contain a specific CSS class name. Multiple elements can share the same class name.
- Tag name locator: Matches elements by their HTML tag, e.g., input, div. But many elements share the same tag, so this isn’t very unique.
The other category is traversal-based locators:
- Link text locator: Identifies hyperlinks uniquely using the full-text content of the link.
- Partial link text locator: Matches hyperlinks based on a substring of the link text, useful for long links.
- XPath: Traverses the XML document structure to find elements that satisfy complex conditions. Flexible locator but can be slow.
- CSS selector: Uses CSS selector syntax, which is faster than XPath but less flexible.
Choosing the optimum locator for an element helps build fast, reliable test automation scripts. The ideal approach is to always prefer uniqueness over speed or flexibility whenever possible.
What is XPath?
XPath (XML Path Language) is a query language used to select elements and nodes in an XML or HTML document. Some key points about XPath:
- It provides a syntax to traverse the hierarchical structure of the document and find specific elements by different criteria.
- XPath expressions contain path selectors separated by ‘/’ to drill down and select elements step-by-step.
- An absolute XPath starts from the root element with a ‘/’ (e.g. /html/body/div)
- A relative XPath starts from the current node without ‘/’ (e.g., div/span)
- XPath can select elements based on attributes (e.g. [@id=’main’]/span selects span elements under parent with id ‘main’)
- Special XPath axes like ancestor child allow the selection of nodes based on position relative to the current node.
So, XPath offers a flexible, programmatic way to describe and locate elements in an XML/HTML document. It allows testers to construct queries to identify elements for automation tools like Selenium. The path-based syntax gives it the versatility to handle complex selection criteria.
Types of XPath Locators
There are two types of XPath locators:
Absolute XPath:
- Starts with a single slash ‘/’ and traverses from the root HTML element.
- Specifies the full path from the root to the target element (e.g.,/html/body/div/form/input).
- Tends to break easily if the HTML structure changes.
Relative XPath:
- Starts with a double slash ‘//’.
- Specifies path from current node, not necessarily root (e.g.,//div/form/input).
- More robust to changes in HTML structure.
- The preferred approach in most cases.
Absolute XPath starts from the root and specifies the full path. Relative XPath starts from the current node and drills down to the target element.
Relative XPath is generally preferred as it is shorter and more robust. Absolute XPath should only be used when it is otherwise not possible to construct a unique path.
Advantages of Using XPath Locators
XPath is one of the most widely supported element locator mechanisms in test automation tools. Its versatility and advanced feature set make it a preferred choice for many testing needs. Some of the notable advantages of XPath are:
- Uniform support across programming languages and test frameworks, XPath works seamlessly with Selenium, Cypress, Playwright, Appium, and other popular test tools regardless of the test code being written: Java, Python, C#, etc.
- Bidirectional traversal of DOM structure, XPath expressions can navigate up and down from an element, allowing flexibility.
- Supports both XML and HTML documents for locating elements.
- Can start identifying elements from any point in the document, unlike CSS locators. This allows shorter, faster expressions.
- Declarative query language allows the construction of conditional logic using various functions and axes without needing procedural steps.
- Compatibility across both old and modern browsers due to widespread adoption.
- Advanced built-in axes and methods provide greater flexibility in crafting complex queries for specific test scenarios.
Disadvantages of using XPath Locators
Although feature-rich, XPath has some drawbacks to consider:
- Varying performance across applications – XPath queries require computational traversing of DOM structure, which can be slower than direct CSS lookup. This can impact overall automation script execution time.
- Shadow DOM limitations – Emerging web technologies like shadow DOM pose challenges for XPath to drill down and find nested elements.
- Brittleness with DOM changes – Usage of absolute XPath with hardcoded indices makes the locators rigid. Any changes in the DOM tree can easily break them.
- Readability challenges – Crafting extremely complex and deeply nested XPath queries can result in long expressions that become difficult to interpret later. Needs commenting for posterity.
- Maintenance overhead – Referencing explicit node numbers or indices ties the XPath too closely with the existing structure. The evolution of UI requires updating all such hardcoded references.
XPath locators may not always be the most efficient way to find elements. Performance, shadow DOM limitations, and brittleness are issues to consider. Very complex XPaths also reduce the readability and maintainability of test code. A balance needs to be achieved between leveraging XPath’s power and keeping locators simple yet flexible enough to withstand changes. A best practice is to try CSS first and use XPaths only where needed to handle exceptions. This helps optimize script stability and speed.
What are CSS Selectors?
CSS Selectors are locators that rely on CSS selector syntax to find elements on a web page. Unlike direct attribute matching done by ID or Name locators, CSS Selectors enable locating elements by leveraging the native CSS selection logic used by browsers. Although the syntax may seem complex at first, CSS Selectors can efficiently look up elements using a sequence of CSS properties like tag names, IDs, classes, attributes, etc.
For example – input#username would locate the input element with the id ‘username.’ The power of CSS Selectors comes from combining CSS style rules and special characters to build selector queries. While simpler attribute-based locators fail with dynamic webpages, CSS Selectors can reliably work with changing IDs, classes, and attributes.
The lookup also happens much faster by directly using the browser’s internal CSS engine. So CSS Selectors provide a simpler, more robust, and faster way to automate dynamic webpages where attribute values frequently change. However, for complex conditional logic, CSS Selectors may need inefficient chaining, unlike XPath queries.
Advantages of CSS Selectors
CSS Selectors have emerged as an alternative to XPath for locating elements and offer some notable benefits:
- Improved Performance – CSS Selectors use direct style rule lookup and hence find elements much faster than XPath traversal. This results in reduced script execution times.
- Readability – The syntax of CSS Selectors is simpler, relying on CSS style patterns. This makes scripts easier to understand for new engineers. XPath complex nested paths can become obtuse.
- Widespread Browser Support – Modern browsers have excellent support for CSS selectors, unlike patching bugs with outdated XPath libraries.
- Responsiveness – CSS binding works seamlessly across platforms like mobile, web, and various screen sizes without needing special handling.
- Reliability – Targeting elements directly via CSS makes scripts more robust, as locators don’t break easily. XPath often requires indexes and complex tree traversal logic.
Disadvantages of CSS Selectors
While CSS Selectors have their strengths, they also come with some limitations:
- Unidirectional Traversal – CSS Selectors can only traverse down the DOM tree from parent to child, unlike the bidirectional capability of XPath. This makes certain queries difficult.
- Limited Methods – No equivalent custom functions exist in CSS for the advanced axes and methods available in XPath. This reduces flexibility in crafting complex logic.
- Reliance on Attributes – CSS binding relies on hooks like IDs and classes being available in DOM. XPath can use text and other nodes for conditional checking.
- No Visible Text Support – Constructing queries based on innerText is not possible with CSS, unlike XPath, which permits them.
- Fragility – Overly chained CSS Selectors tend to break often with minor changes, unlike compact XPath expressions.
CSS Selectors may not be well suited for test scenarios requiring bidirectional traversal, visible text validators, robust conditional chaining, etc. Here, XPath proves more competent. However, CSS Selectors offset this with better speed and directness for simpler use cases. Understanding these tradeoffs helps utilize both appropriately.
XPath vs. CSS selector
Difference | XPath | CSS Selector |
Navigation | Bidirectional (parent to child or child to parent). | Unidirectional (only parent to child). |
Performance | Slower | Faster |
Readability | Complex expressions can be hard to interpret. | Simple selectors like ID, class, and element are readable. |
Flexibility | Powerful axes methods like ancestor, preceding-sibling, etc. | Simpler and less flexible |
Syntax | Path, like starting with / or // and node names. | Selector syntax like ID/#, class/., and element names. |
Namespaces | Supports XML namespaces | No namespace support |
Indexing | Can index into nodes using [index] notation. | No indexing support |
Automation | Commonly used for test automation. | Rarely used for automation. |
Conclusion
Both XPath and CSS selectors are powerful locator mechanisms for test automation. There is no definitive answer on which one is better – the choice depends on the specific use case and test requirements.
XPath provides flexible bidirectional traversal and axes methods for complex queries. However, long XPath expressions can be less readable. CSS selectors are faster and simpler and enjoy wide browser support. However, they lack some of XPath’s advanced capabilities.
For most web UI test automation needs, CSS selectors are preferred for their speed, precision, and readability. XPath is better for complex XML processing and web scraping scenarios. The optimal approach is to use a combination of the two-leverage CSS selectors for common web elements and use XPath, where additional flexibility is needed.