Find XPath in Chrome Browser for Selenium WebDriver

What is XPath

XPath is define as XML path. It is a syntax or language for finding any element on the web page using the XML path expression. XPath is used to find the location of any element on a webpage using HTML DOM structure.

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

Syntax for XPath

XPath contains the path of the element situated on the web page. Standard syntax for creating XPath is as follows:

XPath=//tagname[@attribute='value']

• // : Select current node.

• Tagname: Tagname of the particular node.

• @: Select attribute.

• Attribute: Attribute name of the node.

• Value: Value of the attribute.

We will cover here three parts:

1. Find XPath in Chrome by using ID Locator

2. How to use Pipeline Operator “|”

3. How to use Parenthesis Index “()”

We are using OrangeHRMlive application

For reference - https://opensource-demo.orangehrmlive.com/

1) Find XPath in Chrome Browser

Here we have two options for XPath either we can do right click on the web page and click inspect or we can press F12. After that, you will be able to see details of any of the web elements.

Let’s go with inspect way, right-click on the username box then you can see at the bottom the elements and different options to see the XPath.

Here on the above screen, you can see the “Arrow button” (select an element in the page to inspect it) click on it. Then you will find the details of the web element.

And press “ctrl+F”, another small bar will open to the bottom “Find by String, Selector or XPath”. Here you can write XPath.

Let’s write our own XPath for the username box by using “ID Locator”. Here the XPath is “//input[@id="txtUsername"] if you see below in CTRL+F bar the 1 of 1, it means we found one matching XPath.

If we use one more way to find from input “type” button.

Here XPath will be “//input[@type="text"]” and we will get 1 of 2, which means we found two matching XPath.

This way you can write XPath and you will be able to find web elements.

2) Pipeline Operator "|"

This is a very important operator for daily scripting. Here we can combine two XPath in one Pipeline Operator. So, it will act either first one or the other second one.

If you are running your script in multiple environments sometimes locators will change. So you do not have to change all the previous locators you can write the new locator as well and you can create a Pipeline Operator. It is behaving like a “or” operator either this or that whichever will work.

3) Using Parenthesis () Index

If you writing XPath which is matching with multiple nodes. So despite going through the Java Code Iterate the second element, the third element. We can customize our XPath using this “Parenthesis Index” approach.

In the below image you will see multiple window examples. In this case, you can see three links with the same name. If you inspect you will see the same text.

For this, we will write Using Index () XPath,

(//*[text]=’Click this link to start new Tab’)[1]

So if you see the above image we are getting three same XPath. In this case, if we want to choose one specific XPath. We have to use “Parenthesis” at the beginning and last and give the number of an index in brackets after Parenthesis.

For example,

(//*[text()=’Click this link to start new Tab’])[1]

(//*[text()=’Click this link to start new Tab’])[2]

(//*[text()=’Click this link to start new Tab’])[3]

So whenever you are finding multiple matching nodes use this indexing approach and you can easily work to the number of web elements.

Here we learn,

· How to find XPath by inspecting or press F12 you will get the inspector

· Press “CTRL+F” you will get a small bar where you can write your own XPath

· Use “Pipeline Operator” for multiple XPath

· Use “Parenthesis Index” if you have multiple web elements

Happy Learning!!