Choosing Effective XPaths

Earlier generating xpaths used to be a tedious task but now with the help of Firebug and other tools, it became hell easy. But choosing the right and effective xpath is equally important and you cannot always rely on tools for the best decisions.

In this tutorial I am explaining the different ways of choosing xpaths and choosing the most effective xpaths.

Example: Let’s take an example of RSS button at the bottom of the page in the footer section of www.store.demoqa.com. 

Technique 1 | Absolute XPath: The easiest way of finding the xpath is to use the Browser Inspector tool to locate an element and  get the xpath of it:

XPath Generated by the tool is : /html/body/div[2]/div/div/footer/section[3]/div/ul/li[3]/a

Technique 2 | Relative XPath: At times XPath generated by Firebug are too lengthy and you see there is a possibility of getting a shorter XPath. Above xpath will technically work, but each of those nested relationships will need to be present 100% of the time, or the locator will not function.  Above choosed xpath is known as Absolute xpath. There is a good chance that your xpath will vary in every release. It is always better to choose Relative xpath, as it helps us to reduce the chance of element not found exception.

To choose the relative xpath, it is advisable to look for the recent Id attribute. Look below at the HTML code of the above screen shot.

You can see the recent or last Id produced is ‘footer_nav‘. This id would be appropriate in this case, so a quality xpath will look like this:  //*[@id=’social-media’]/ul/li[3]/a

Did you notice the difference between the Absolute and Relative xpaths?

Absolute xpath: /html/body/div[2]/div/div/footer/section[3]/div/ul/li[3]/a

Relative xpath: //*[@id=’social-media’]/ul/li[3]/a

Absolute xpath is using single slash at the start of the xpath and relative is using double slash.

Difference between single ‘/’ or double ‘//’

A single slash at the start of Xpath instructs XPath engine to look for element starting from root node.

A double slash at the start of Xpath instructs XPath engine to search look for matching element anywhere in the XML document.

Choosing Relative xpath using FirePath

There is an alternate way to get the relative xpath with help of the FirePath tool. Click on the drop down menu on the Firepath button and Unselect ‘Generate absolute XPath’.

Now click on the same element with the Inspector, the new xpath will look like this:

If something gets changed above the id social-media, your xpath will still work.

Technique 3 | Relative XPath | Combination of Double Slash: Relative xpath can be choose in many ways and to understand that, it is required to understand the usage of single & double slashes in the xpaths.

Usage of Single ‘/’ and double ‘//’ in the xpath

A single slash ‘/’ anywhere in Xpath signifies to look for the element immediately inside its parent element.

A double slash ‘//’ signifies to look for any child or any grand-child element inside the parent element.

Finding it confusing, just look at the xpath of the same RSS button with using double slashes in the middle of the xpath:

Absolute xpath: /html/body/div[2]/div/div/footer/section[3]/div/ul/li[3]/a

FirePath xpath: //*[@id=’social-media’]/ul/li[3]/a

New relative xpath: //body//footer/section[3]/div/ul/li[3]/a

Another relative xpath: //body//section[3]/div/ul/li[3]/a

I would suggest you to try it yourself, so that you can understand it more efficiently.