Selenium Xpath: See Things the From Your PC’s Point of View

selenium xpathPages on the web look different to computers than they do to you and me. Most human beings don’t really care how a web page looks to computers. However, if you are writing Selenium XPath tests, you need to know how to look at pages on the web the way computers do.

Selenium is the framework used most commonly for testing, which you can read more about in this article. It lets you write Java tests that can do standard actions on the web such as clicking buttons and filling in forms. Usually, selenium tests take the form of opening a page on the web, locating an element of html, interacting with it by selecting options, typing into it or clicking it, locating another element and doing other types of interaction, as you will learn when you check out this web applications testing course.

The key to writing tests involves locating elements. There are many ways to do this such as by using Xpath, by ID or by name. Using an ID or name is okay for simpler tests. For situations that are more complex, however, you will need to know how to write queries using XPath. Typically, tests are recorded using the IDE plugin in Firefox which generates selectors automatically. However, when you do this, the tendency is that you need to alter some of them.

This usually happens when you need to deal with web pages that are generated dynamically. One example is when you are searching websites for pants to buy. If there are various colors and sizes available for the pants, you could get back many buttons that say, ‘Add to bag.’

When clicking the buttons for the plus size pants, the IDE of Selenium won’t know what you mean. It will attempt to write expressions that select buttons but this could turn out to be wrong. Like, if you click the button that is the 3rd one of the page, the IDE may just use this to select buttons.

On the other hand, if you do test reruns and some of the colors or sizes are not in stock, the button you select may not be the 3rd one on the page. What you need to do is write out tests that know how to ‘click button for plus size pants.’ You are allowed to do this with XPath, but queries done by XPath can be somewhat complicated. Here is a step-by-step guide that will help you write queries. Of course, you might also want to take this course, which gives you all the information you need regarding Selenium.

Step 1: Navigate to the Problem Page

The first thing you need to do is to navigate to the page you are having an issue with manually. For example, you may be working on tests that buy a product by selecting a buyer then a product, entering the details of the address then finally the details of the credit card. You can use the IDE of Selenium to record the test before saving this for playback in Java code. The problem is that when you run it, it fails during the credit card details getting entered, particularly the number of the card, as you can see in this screenshot:


On that page, do you see that there are 2 fields for ‘card number?’ The Selenium recorded test was picking up the one for gift cards. As you can see, you need the one in the section that says credit cards. How then do you change the selector to do this?

Step 2: Writing and Testing your Expression of XPath

When writing and testing XPath expressions, there are many ways you can do this. You can use the IDE of Selenium itself as it has an option that says ‘test.’ You can also use Firebug and the tester Fire Path which integrates with Firebug even if it is a separate add-on. You can also use Firebug and a separate tester for Xpath which you can learn more about with this course.

All the methods mentioned will usually work but the most powerful one is using the Firebug tester along with Firebug with an add-on that is separate which is works well with Firebug. To get this going, the first thing to do is to get identify the element html which interests you and see how it can fit into the page structure. You will see something like this if it opens up Firebug:


You can use the selector tool of Firebug to select an element of html on the page and see this in the view as html. On the Firebug panel top left, this is the arrow icon.


Now that the extensions of Fire Path are added, you can get a separate view of Fire Path and can use the tool selector to bring up the view’s elements. So if you switch the view to Fire Path and use the tool selector to pick out the input box for card number, here is what you’ll see:


At the top of the panel, you will see that the XPath expression will pick out elements generated automatically and displayed at the panel’s topmost part. This is the expression that needs rewriting. You might find that an easier way of doing this is to write XPath expressions to build it up gradually. Since you are looking for an input, a good starting point will be to write something that selects every input:

// input

When you do this, you will see that all page inputs will be highlighted.


You need the input for card number in the area of the page for credit cards. SO how do you know what expression of XPath to select this one? To inspect the DOM to understand the structure, you can use Firebug:


When you look at the way this is structured, you will see that you are looking for the input with the card number’s ID within the div with the heading h3 of ‘credit card.’ In building expressions for this, you can begin by picking out the way this is structured. You will see that you are looking for the input with the card number’s ID within the div with the heading h3 of ‘credit card.’ In building expressions for this, you can begin by picking out the div:

// div [h3/text () = ‘credit card’]

The way this is structured, you will see that you are looking for the input with the card number’s ID within the div with the heading h3 of ‘credit card.’ In building expressions for this, you can begin by picking out the div:

This picks out the div correctly but then how do you start navigating down to the input? You can use axes for navigating down and up the DOM in XPath. The input is inside the div so you will need to use an axis like ‘descendant’ or ‘child.’

// div [h3/text () = ‘credit card’ / descendant :: *

This will start picking up all the nodes under the div. You want an id ‘card number’ input so you can alter this to:

// div [h3/ text()='Credit Card']/descendant::input[@ id='card Number']

Step 3: Put Back the XPath Expression into Your Tests and Re-Run

Once the XPath expression has been worked out, you can return it into your test and run it again. Your syntax will then be:

selenium. type( "// div [*/text()='Credit Card']/descendant::input[@id='card Number']", "2341234123412341");

By using these techniques with Fire Path and Firebu8g, you can test and build up even complex expressions of XPath with ease, particularly after you go take a course such as this one on Selenium.