Writing A Proper Xpath

XML or eXtensible Markup Language provides a standard syntax for the markup of data and documents.

Xpath or XML Path is just like a query written like in SQL or MySQL databases, that allows you to select a specific node from the Document Object Model (DOM) like XML document, or an HTML file. Xpath is written in such a way that it allows navigation of XML documents,with the purpose of selecting individual elements, attributes, or some other part of an XML document for specific processing.

 

WHY XPATH’S

While trying to write your Selenium scripts, you must have noticed that you need to identify the elements. Selenium gives you the flexibility to identify the elements via various mechanism like ID, Name, Tagname, CSS Selector etc. But in most of the scenarios and in most of the webpages, not every element will be having a unique name and id. Though you can use CSS Selector to select that element, but xpath is a much easier (but complicated) way to identify element.

Hence, Selenium designers also include different methods to identify an element via xpath. Suppose an Xpath to be a set of directions given to you by your friend to reach his house. Now you must know the important and unique points or posts in the way to arrive at the destination. Xpath follows the same procedure, and as we will see in the example, it is quite similar to the directional example that I gave.

Before getting started with the example for writing an Xpath, we need to know few things

Absolute XPath

An Absolute Xpath is the one that starts from the root node. A good way to recognize this kind of element is that it starts with a forward slash ( / ). Absolute xpath is very fast, since it is a step by step, thorough path provided. The downside, however, is that any single change in the document tree structure would make the path unsable, after the part where the new change has been made.

Example of an absolute xpath can be

html/head/body/table/tbody/tr/th

Now suppose, if I were to add any new node in between , suppose a div tag somewhere in between

html/head/body/table/div/tbody/tr/th

Now, the document structure has changed. So if you are using the xpath up to the <th> tag, then it would result in an error and you have to change the xpath again, to use the new structure.

Relative Xpath

A relative xpath doens’t starts from the root node. It starts from the node that you want it to start with. An example of a relative xpath would generally start with a double slash ( // ).

An example would be

//table/tbody/tr/th

Relative xpaths are relatively slower, as we give it a partial path to select the elements from, not the full path, as we do in Absolute xpath.

While working with relative xpaths, you will many times see xpaths using different attributes to identify an element.

For example, you can use any attribute to find an xpath using the form

//tagname[@attribute-name='value1']

If you want to use multiple attributes to form an xpath, you need to use

//tagname[@attribute1='value'][@attribute2='value']

We can also use the contains( ) method, to form an xpath, in case, actual matching or an attribute cannot be done, or if you have multiple childs of a node.

//tagname[contains(@attribute,'value1')]

We can also use the starts-with( ) method to form an xpath, like this

//tagname[starts-with(@attribute-name,'value1')]

You can use the following node method to select the very next element of a node like

xpath/following::xpath-of-the-element

e.g –  //input[@id='']/following::input[1]

To select an element just above a node, use the preceding method

xpath/preceding::xpath-of-the-element

e.g –  //input[@id='']/following::input[1]

There are a lot of other things that you can also use while creating your own xpaths. You can use the different axes that Xpaths provide. Read this link for more description.

We will see how we can create a new xpath in the next page.