How to Create Custom Xpath in Selenium C#

Xpath is used to interact with the elements, In this selenium C# tutorial We will see, What is an XPath, How to create a custom XPath, and Uses of Xpath in Selenium web driver using C#.

There are some technical terminologies that are most used while working with Xpath. That is Tags, Nodes, Root Node, Sub Node, etc. Let’s understand these Xpath terminologies.

What is Tag in Xpath?

Generally, we see that in the coding of our webpage all the things are written in between the tags like <div>, <form>,  <input> these all are Tags. which are related to the specific components of the webpage.

When we talk about XML these tags are also referred to as Nodes. So we can also say them as div node, form node etc.

Parent tag or node in Xpath

Tag or node is written in between the other tags or nodes.  So the outer tag or node will call parent tag or node. <HTML> is the outer tag of each webpage. in the case of custom XPath, it depends on the situation.

Inner tag or node in Xpath

 Inner one will be called a child tag or child node. Similarly, if another tag or node is written between the first child node then this will call as parent node for the next node, and the one which is written inside of it that will call his child node.

Here we can also refer to them as a child of child or sub child node.

So the first node which is the parent of all refers to the Root node.

For example: In the simple webpage the very first tag is <html> tag so this is our root node and the <head> and <body> tags are written under the <html> tag so they are child nodes. So these are the basic terminologies that we will be using while constructing the Xpath.

Create Custom Xpath in Selenium C#

There is a certain selection mechanism that we have to use for selecting a node or constructing an Xpath for an element we are using here eclipse IDE for selecting the Xpath.

Select Nodes in XPath

//<nodename>

using backslash with the node name is used to select the matching elements from the current webpage.

for example- if we go to firepath and write //input then it will select all the current input nodes doesn’t matter they are child, parent, or root node. It will highlight all the input fields in the current webpage which match the respective Xpath.

Example:
//div

/<Node>

It is used to select the immediate child of the particular node.

For example- if we want to find any node that comes immediate after any tag so we can write a Xpath for this like if we want to find  any anchor tag <a> who comes immediate after any <div> tag so give it’s Xpath as below.

Example:
//div/a

//<Node>[index]

It is used to select the node based on the index. If we have multiple immediate child of any node so if we want to select any particular immediate child of that tag so we use the index property.

For example- //div/div[2]  it will select the 2nd div node which is immediate child of  //div this particular div node.

Example:
//div/div[2]

//<Node>/.

The single dot with single backslash represent the current node or directory. Writing //div this or writing //div/.

both are the same things because lastly it is selecting the immediate child is /div it will show it as a current node or else if we write it with single backslash with the single dot /div/.

Example:
//input 
(Or)
//input/.

//<Node>/..

The double dots with the single backslash represents the parent node or directory. Writing the //<nodename> with single backslash and double dots //<nodename/.. it will show the parent node.

Example:
//input/..

 

These are some certain mechanisms that we have discussed for selecting a node or tag inside the webpage.

Selecting Nodes Based on their Attributes in Xpath

And it is also possible that we can select the node based on their attributes. If we have a node <input id=”referrer” type=”hidden” value=”” name=”referrer” autocomplete=”off” /> in this the attributes are id, type, value, name and autocomplete. For selecting the node based on its attribute we have to follow the syntax as below.

Syntax:

//<node>[@<attribute>='<value>']

For example- if we want to select the input node corresponding to its Id attribute so we have to write the Xpath like below.

//input[@class='ddl-emaillink']

//input[@class=’ddl-emaillink’] then click on Eval button so it will select all the input node present into the current webpage and based on the attribute class which has the value ‘ddl-emaillink‘ found by applying the filter which selects the corresponding node.