Part 1: All about XPath in Selenium Webdriver: Basic concepts

Hello Folks,

We have learnt 6 locators till now in details(Part 1 and Part 2). In this post we will learn:

1. What is XPath.
2. Absolute XPath
3. Relative XPath
4. Difference between single slash and double slash.
5. Understating the term immediate nodes, Any nodes and indexed nodes.

XPath is one of the locators available in selenium Webdriver. It is very powerful and best alternative locator option when you are not able to locate web elements using other locators.

What is XPath:

• XPath stands for XML Path Language which is a query language for selecting nodes in XML document.
• XPath helps in finding direction of element through nodes and its attributes.

Types of XPath:

XPath can be categorized in two types:

1. Absolute Xpath
2. Relative Xpath

Absolute Xpath: I will give you a real-time example to understand in better way.

You stay in Silk board and you want to go to White field Accenture office. You ask me the way to reach your destination. I suggest way as below:

Go to Silk board bus stop-> Take 500 D bus and get down in Marathalli. -> Take 500 C bus and get down in ITPL bus stop. -> Go to 4th main- > Go to 4th Cross -> Building No 16 -> Tower D -> 5th Floor.

Above direction is absolute as I am guiding you step by step.  Same concept applies for absolute XPath as well. You can call step by step as node by node in XPath. It uses Complete path from the Root Element to the desire element.

Consider below HTML code:

<a href="www.google.com">Google</a>
<div>
<div>
<a id="My URL" href="www.google.com">Amod</a>
FN:<input id="First name type=" type="text" />
LN:<input id="Last name type=" type="text" />
<button id="Last name type=">Button</button></div>
</div>

In above html, you need to locate input node who has label as FN. You can start from node html (Root node) and you can traverse node by node. You will traverse to that node as below:

/html/body/div/div/input[1]

Input[1] is because when you reach to div node whose name is innerDiv, you find two input tags inside div . You know your required input is at first position. So, you put index to navigate to desire input node.

Similarly, if you want to navigate to button, you will traverse as below:

/html/body/div/div/button

If you want to navigate to input node whose label is LN, you will navigate as below:

/html/body/div/div/input[2]

Note: You can group only similar node. For e.g. All input node can be grouped and index can be decided based on their order. Input and Button cannot be grouped.

Disadvantages of Absolute Xpath:

1. It will be lengthy because for each element you start traversing from root node.
2. In above html code, you know div whose name is InnerDiv has only two inputs and you can decide their index as well. Suppose, developer changes the code inside div and add one more input tag just above FN input tag. Your all index calculation is gone. If the same thing is done at multiple places, it will be very difficult to modify absolute xpath.
3. Chances of modification in html code is high. So modification is not feasible in absolute Xpath.

Relative Xpath:

Consider same example of direction to White field Accenture office from Silk board. This time I will suggest you as below:

Reach ITPL- >Building No 16 -> Tower D- > 5th Floor

I am not suggesting route from your home. I stared direction directly from ITPL and skipped main and cross as well. This can be called as relative direction to your destination.

Same applies for relative Xpath as well.

Consider the same above HTML:

To reach input with label FN, you reach directly to div and look for your desire input node.

//div/input[1]

//div/input[2]

//div/button

Difference between single slash (/) and double slash (//):

1. Single slash represents immediate child nodes while double slash represents any nodes. For example: /div/input represents immediate input nodes inside/of div node. //div//input represents any input node inside any div node.
2. Absolute xpath uses single slash while relative xpath can use both single slash or double slash.
3. Some people say relative xpath always starts with double slash. It is not correct. /html//input is also a correct example of relative xpath.

Understanding Immediate node , any node and indexed node:

Concept: You need to start from LHS and move towards RHS.

Scenarios:

/GrandFather/Son : (All own sons of Grand Father.) It represents immediate Son nodes of parent node Grand Father. It will give you two matching nodes. Immediate child does not mean first child node. It means all matching immediate child nodes. In above image, Grand Father has two Sons. So, it will give you two Son nodes.

/GrandFather/Son[1]: (First own son of Grand Father.) It represents First son of Grand Father.  It will return you one node only as you are specifying index of son.

/GrandFather/Son[2]: (Second own son of Grand Father) It represents Second son of Grand Father.  It will return you one node only as you are specifying index of son.

/GrandFather/Daughter: (All own daughters of Grand Father) It represents immediate Daughters of Grand Father. It will return you two daughter nodes.

/GrandFather/Daughter[1]: (First own daughter of Grand Father.) It represents First Daughter of Grand Father.  It will return you one node only as you are specifying index of daughter.

/GrandFather/ Daughter [2]: (Second own daughter of Grand Father)  It represents Second Daughter of Grand Father.  It will return you one node only as you are specifying index of daughter.

/GrandFather/Son/Son:(All sons of sons of Grand Father / All grandsons from sons.) It represents immediate son nodes of immediate son nodes  of Grand Father. It will return you two son nodes. Two from first son.

/GrandFather/Daughter/Daughter: :(All daughters of daughters of Grand Father / All granddaughters from daughters.) It represents immediate daughter of immediate daughter of Grand Father. It will return you two nodes. One from first daughter and one form second daughter.

/GrandFather//son:(All sons and grandsons of Grand Father) It represents any son nodes of Grand Father. It will return you total 6 nodes . Two son nodes from immediate child of Grand Father node and two immediate child son nodes from first son node and two immediate child son nodes from second daughter node of Grand Father node.

/GrandFather//Daughter:(All daughters and granddaughters of Grand Father) ()It represents any daughter nodes of Grand Father node. It will return you 6 nodes. Two immediate daughter nodes of Grand Father node and one daughter node from first daughter node , one daughter from second daughter node and two daughters from First immediate daughter node of Grand Father node.

//son:( All sons) It represents all sons node irrespective of Grand Father. It will return you total 6 nodes . Two son nodes from immediate child nodes of Grand Father node. Two immediate child son nodes from first son node and two immediate child son nodes from second son node of Grand Father node.

//daughter: (All Daughters) It represents any daughter nodes. It will return you 6 nodes. Two immediate daughter nodes of Grandfather node and one daughter node from First immediate daughter node,  one daughter from second immediate daughter node and two daughter nodes from second immediate son node of Grand Father node.

//son[1]: (All first son) (Har ghar ka bada ladka)It represents any First son nodes. It will return three nodes. First immediate son node of Grand Father node. First son from first immediate son node and first son from immediate daughter node of Grand Father node.

//daughter[1]: (All first daughter) (Har ghar ki badi ladki)It represents any first daughter nodes. It will return first daughter from immediate child nodes of Grand Father node. First daughter node from first immediate daughter node, first daughter from second immediate daughter and first daughter from second immediate son. Second immediate daughter has two sons and one daughter. So, we can say she has one daughter which is first in daughters.

I think above examples are enough to get difference between immediate, any and indexed nodes.  This is important before we go in depth of Xpath.

If you like my posts, please like, share and comment. Feedback and suggestion are always welcomed.