The Quick QA Tester Guide to Using XPath Selectors [+ Free CSS to XPath Conversion Sheet]

What is XPath, and how does it differ from CSS?

XPath stands for XML Path Language, which is a type of query language used in web development and automated web testing. XPath is useful for navigating and locating elements within XML documents using criteria like element names and attributes. While CSS is more common and recognizable, XPath can be more powerful, because it offers complex features like text matching and hierarchical searches.

Both XPath and CSS are used to find elements on a web page, but XPath can be slightly more advantageous, depending on what you’re looking to accomplish. XPath supports complex queries, allowing traversal up and down the DOM tree and selecting elements based on text content and various attribute conditions. In contrast, CSS selectors are mainly designed for styling HTML documents and are also only able to traverse down the DOM tree.

XPath also tends to be more intuitive and accessible for non-programmers. Its ability to select elements based on text makes it easy to understand and use, which makes it a great option for QA testers.

What are XPath selectors, and why should QA testers use them in test automation?

XPath selectors are the expressions used to find specific elements inside XML documents. These selectors allow for greater flexibility and more precise element targeting, which makes them an ideal tool in automated web testing. With XPath expressions, QA testers can make their tests more detailed, allowing for a more comprehensive automated testing strategy than with CSS alone. This is because XPath can handle complex scenarios that involve dynamic content, nested structures, or specific text content, allowing for more robust test scripts that are less likely to break when being updated. With XPath, you’ll see less maintenance on the part of the QA tester.

Targeting with XPath vs CSS

While we typically use CSS to target input elements, XPath’s targeting method is similar but allows for some additional features. For instance, XPath selectors often begin with //, indicating a search anywhere in the document. This flexibility makes XPath particularly useful for automated browser tests, because it allows testers to create precise and powerful selectors.

We use the same approach for specifying the element type, such as an input field. When searching for inputs, we might find multiple matches, just like using document.querySelectorAll in JavaScript. The syntax for matching attributes is also similar, with the only difference being that XPath requires an @ symbol before the attribute name. For example, to find an element by its name, you’d write @name. This minor difference is typical throughout the syntaxes. Another method in XPath involves replacing the element type with a *, meaning “any element with this attribute.”

When using CSS, hierarchy works similarly to XPath, with subtle differences. In CSS, using a space between elements means any child element will be selected, like finding a div containing an input. An angle bracket (>) makes the selection more specific, indicating the input must be directly inside the div.

In XPath, a double slash (//) is like a space in CSS, meaning the input can be anywhere inside the div. A single slash (/) specifies the input must be directly inside the div, similar to CSS’s angle bracket. While these methods are straightforward, they can create rigid selectors, so use them carefully.

Working with partial selectors

Partial selectors are web development tools that assist with finding input elements on a web page that match part of a given attribute or value. For example, to find a search button containing the word “Google,” you might use *=’google’ in CSS. XPath has a similar feature called contains, but it should be written as contains(@value, ‘google’), which is a bit more detailed but powerful.

XPath also supports matching with starts-with and ends-with functions. Although CSS is shorter and simpler for selectors, XPath’s more descriptive options can be clearer, especially for those unfamiliar with shorthand notation.

The contains method and starts-with function in XPath are particularly useful for matching elements based on their text content, something CSS cannot do. For instance, if you want to target a link that says “About,” you can use XPath to find it by text. Instead of looking at a long and complicated class name or URL, you can simply search for the text “About.”

Here’s how you do it in XPath: //a[contains(text(),’About’)]. This method is clear and easy to understand. It makes automated testing simpler, as it allows you to uniquely identify elements by their text content. This clarity is especially useful for writing and maintaining tests. Most tools, like Ghost Inspector, support both CSS and XPath, allowing you to choose the best method for each situation.

Quiz: Create a quick test with CSS, Xpath, and Ghost Inspector

Here’s a quick 3-step guide to using Xpath and CSS during testing with Ghost Inspector. We’ll use Google as our example for this automated test. Our goal is to ensure that the top left “About” text link is present on Google’s front page. We’ll use CSS for the first step and XPath for the second.

1. Add a CSS Step

This first step will use CSS to click the search field. First, open Ghost Inspector and create a new test. Then, navigate to Google’s front page. Add a new step to click the search field using the CSS selector input[name=’q’]. Save this step.

2. Add an XPath Step

This step will ensure that the “About” link is visible. In the same test, add a new step to verify that the “About” link is present and visible. Use the XPath selector //a[text()=’About’] to locate the link. Save this step.

3. Execute the Test

Run the test in Ghost Inspector to ensure that it performs both actions correctly:

• Clicking the search field using the CSS selector.
• Verifying the visibility of the “About” link using the XPath selector.

By following these steps, you can quickly set up a test in Ghost Inspector that uses both CSS and XPath selectors to interact with and verify elements on a web page.

Conclusion

When it comes to automated web testing, both XPath selectors and CSS selectors play an important role for QA testers. CSS selectors provide an efficient way to target elements based on class, ID, and other basic attributes while XPath selectors allow for more advanced querying capabilities, allowing testers to identify elements based on hierarchical relationships, text content, and more precise attributes. This gives testers the most flexibility when it comes to navigating complex and dynamic DOM structures. By integrating both XPath and CSS selectors into their QA strategy, testers can ensure more comprehensive and durable test scripts, saving time and preventing bugs and issues within their websites and web apps.

Ghost Inspector also provides resources to convert between CSS and XPath, so testers can choose the most suitable method for their needs. That’s why we’ve created this FREE downloadable CSS to XPath Conversion Sheet. Simply fill out the form below with your name and email to gain access to this handy QA cheat sheet. Once you hit submit, you will be redirected to the download page.