Xpath Tutorial

XPath stands for XML(eXtensible Markup Language) Path.Using XPath we can navigate to any element in an XML document. Since XML is a component of HTML, so XPath’s can be used to find web elements on any web page.

There are two types of XPath:
1. Relative XPath
2. Absolute XPath

Absolute XPath
Here, the XPath is selected with reference to the first XML node of the web page and then coming down to the web element that we are locating.

Example of Absolute XPath: html/body/div/div[3]/form/div[2]/div[3]/center/input[1].

The biggest disadvantage of this approach is that if some div’s get deleted or some new are added in between the start and the current node, the XPath value will become invalid.

Relative XPath
Here, the XPath is selected with reference to the current XML node of the web element. Relative XPath usually starts with // and its syntax is //tagname[@attribute=’value’]. Given below are the ways in which Relative Xpaths can be used to find the desired web element.

1. Simple Relative XPath:

This is the most basic way of writing an XPath Expression, denoted by //Tag[@attribute=’value’]. It can be remembered as the inverse of VAT (Value Added Tax) i.e. TAV (Tag, Attribute, Value).

Here the Tag is input, the attribute is id and value is lst-ib.
 

2. XPath using OR/AND

We can find an element using OR & AND expressions based upon our requirement. For OR, out of the two conditions, one must be true in order to find the element.

For AND, both the conditions should match in order to find the element.

3. XPath using text()

Using text we can find the element by its exact matching text.

4. XPath using contains()

It is useful when the element attributes are changing dynamically. Using contains we can select elements on the basis of their partial texts.

Here the partial text is sub.
 

5. XPath using starts-with

It is also useful for finding elements whose attribute values change dynamically. We can find the element by matching it with the starting text of the element attribute.

Here the id’s of the above field change dynamically, but the start of the id remains same. So, we have considered u_0 and located the elements.

*XPath Axes denotes the nodes that are relative to the current node. You can learn more about it from W3 Schools.
 

6. XPath Axes: Following

Using Following, we can choose the immediate next node from the current node.

Here, the current node is ‘Google Search‘ button, using that we chose ‘I’m Feeling Lucky‘ using following.
 

7. XPath Axes: Ancestor

Ancestor enables you to select all the ancestor nodes (parent, Grand parent etc.) from the current node and pin point to any particular node.

In the below example the current node is English node. On using ancestor, it will select all the ancestor
nodes with reference to this node.

Now, if we want to select any particular div, we can do this by giving numbers inside of a square bracket, next to div; as shown below.

8. XPath Axes: Child

With Child, we can select all children elements of the current node and then focus on any particular element.

Here, we have selected all the child divs of the main div main.Now if we want to select any particular div we can put the div number in the square bracket as shown below.

9. XPath Axes: Preceding

Preceding selects all nodes preceding to the current node.

Here the current node is _eEe and the preceding input nodes are two buttons. Now if we want to select any of the buttons, the XPath will be:

10. XPath Axes: Following-Sibling

Following-sibling selects all the nodes following the current node at the same level as that of the current node.

Here the current node is ‘Google Search‘ button.

11. XPath Axes: Parent

Parent selects the parent node of the current node.

Here the current node is the main div.

If we want to select any particular div, we can give the appropriate number in the square bracket after div.

12. XPath Axes: Self

Self selects the current node. As the name suggests it only locates one ‘self’ node.

13. XPath Axes: Descendant

Descendant selects all descendant nodes from the current node.

TO locate any particular div, you can pinpoint it by using different div numbers as shown below: