Today we will discuss how we can find XPath in the Google Chrome. But before knowing it, do you know what is XPath exactly? In this article, our agenda will be to learn about XPath and its types. Then further, we will see how we can find XPath on a web page of Google Chrome.
XPath is nothing but XML Path. The XPath expressions are used to locate or identify, elements/nodes in the XML document. XPath expression contains the path of the elements which are present on the web page.
The Syntax for XPath is given below:
XPath= //tagname[@attribute value= “value of the attribute”]
There are two types of XPath:
- Absolute XPath: Using absolute path, one can directly locate the element on the web page. But, there is one disadvantage of the absolute XPath; it fails if there is any change in the structure of the webpage. So, the relative XPath is preferred over the absolute XPath.
Let us see the syntax of absolute XPath:Absolute XPath = //html/body/tag1[index]/tag2[index]/ tag3[index]/……./ tagn[index]
- Relative XPath: Relative XPath start searching the element from the middle of the webpage. It does not fail even if the structure of the web page is changed.Let us see the syntax of Relative XPath:Relative XPath = //tagname[@attribute = “Value of the attibute”].
After learning what XPath is, let us see how we can find XPath on Google Chrome.
Steps for finding the XPath in Chrome.
- Step 1: Open any webpage on your screen. Here, for an explanation, let us take the homepage of QueHow.
- Step 2: Now, to open the Developer tools go the Customize and control Google Chrome (1) button present on the extreme right upper corner and click on More tools (2) and you will find Developer tools (3) there, click on the Developers tools.
You can even press the F12 button from your keyword. Both will work similar and Developer tools will open.
- Steps 3: Now, you will find Selector (1) on the developer tools page. Click on it, and come to the web page of QueHow and click on any element you want to find XPath of. For explanation, I have clicked on software (2).
Make sure Elements Tab is open on the developer tools page.
- Step 4: You will now see a line of code highlighted in the Elements tab page of developer tools. This line shows the path of the Software tab on QueHow webpage. You can right-click on the line and go to Copy option, and from there you will find Copy XPath.//*[@id=”menu-item-1385″]/a/spanCopy XPath from there, and you can save it in a note pad or anywhere you feel.
You have one more option you can write your XPath to find the element Software on QueHow webpage. To type your own XPath press Ctrl+F. You will find a writing block opened at the bottom of the code section. Now, following the syntax for XPath I have written the following code.//span[@itemprop=”name”]
Now, “itemprop” attribute name is common for many tabs present on QueHow webpage. As you can see in the image, we have found 35 results for this expression. So, you can navigate through all results obtained by the XPath, and find the element of your interest.
So you can find XPath in Google Chrome in this way.