How to Find XPath in Chrome Browser

In this tutorial, we are going to learn a very important topic of how to find XPath in Chrome browser. XPath is the most powerful way to determine the location of elements on a web page.

Therefore, I will recommend that you practice more and more to find XPath in chrome browser because when you would go for any company technical test, you will have to find XPath in chrome browser only. 

Let’s know what are few steps to find XPath in chrome browser?

Steps to Find XPath in Chrome Browser

There are following steps to find XPath in Chrome browser for Selenium WebDriver script.

1. Open URL or web page in the Chrome browser.
2. Right-click on that element on which you are trying to find XPath and then go to option “inspect”.
3. Now, the Elements panel will be opened right-hand side on the screen. It will show in blue color.

4. Press ctrl+F to enable DOM searching in the panel.
5. Now you can write XPath in the panel to evaluate for that element.
6. If XPath is matched with any elements, they will be highlighted in DOM in yellow color.

Let’s find out XPath of different elements on the Facebook home page Follow the above steps to determine the XPath of element.

1. XPath for First name:

Step1: Right-click on element (First name) and click on inspect option as shown in below screenshot.

How to find XPath in Chrome browser

Step 2: Now you will see HTML in the blue strip for element “First name”. Press ctrl+F to enable DOM searching in the panel as shown in below screenshot.How to find XPath in Chrome browser
Step 3: Follow the basic format to write XPath of any elements. It is given below:

The path of element at a webpage is selected by XML path syntax. Standard syntax to create XPath is given below:

           XPath = //tagname[@Attribute = ‘value‘]
        // ➨ It select current node.
        tagname ➨ It is the name of tag of particular node. For example: input. 
        @ ➨ It selects attribute like id, name, className, etc.
        Attribute ➨ It is the attribute name of the node. For example: type, class, name, id, etc.
        value ➨ It is value of attribute.

For example:
    Syntax to find XPath in Chrome browser

On the basis of the above screenshot of element “First name”, we can easily find XPath of element.
              XPath(First name): //input[@name = ‘firstname’] (1 of 1 matched)

Similarly, we can write also XPath of any elements just by following all the above steps.
For example:
1. XPath(Surname): //input[@name = ‘lastname’] (1 of 1 matched)

2. XPath(New password): //input[@data-type = ‘password’] (1 of 1 matched) 

3. XPath(Femal Radio button): //input[@id = ‘u_0_8’]

4. XPath(Sign Up): //button[@name = ‘websubmit’] // Here button is tagname.

5. XPath(Facebook logo): //i[@class = ‘fb_logo img sp_XWJdzZnoeA1 sx_ba923f’] // i is tagname.

Final words
Hope that this tutorial has covered almost all important points related to the finding of XPath for any elements in Chrome browser. I hope that you will have understood this topic and practiced all examples. You can also practice XPath from another website.
Thanks for reading!!!
Next ⇒ XPath tutorial in Selenium WebDriver⇐ PrevNext ⇒

Leave a Comment