In this tutorial, we are going to learn a very important topic of how to find XPath in the Chrome browser.
XPath is the most powerful way to determine the location of elements on a web page. It is a query language for searching and selecting nodes from the XML document.
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 a few steps to find XPath in Chrome browser?
Steps to Find XPath in Chrome Browser
Google Chrome provides an inbuilt feature for inspecting pages and elements. They are much more powerful than Firebug.
There are following steps to inspect an element and find XPath of element on a webpage in Chrome browser for Selenium WebDriver script. They are as follows:
1. Open URL or web page in the Chrome browser.
2. Move the mouse over the desired element (object) on the web page, right-click on that element on which you are trying to find XPath, and then go to option “Inspect Element”.
3. Now, the elements panel will be opened right-hand side on the screen. This frame will highlight the HTML code of element 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 https://www.facebook.com. Follow the above steps to determine the XPath of elements.
1. XPath for First name:
Step1: Right-click on element (First name) and click on the inspect option as shown in the below screenshot.
Step 2: Now you will see HTML code in the blue strip for element “First name”. Press ctrl+F to enable DOM searching in the panel as shown below screenshot.
Step 3: Follow the basic format to write XPath of any element. The syntax to write XPath is as follows:
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 the tag of a particular node. For example: input.
@ ➨ It selects attributes 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 an attribute.
Look at the below screenshot where we have written XPath for element “First name”.
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 element just by following all the above steps. Let’s take different elements 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.
How to find XPath in Mozilla Firefox using Firebug add-on?
The newer version of Mozilla Firefox provides in-built ways to inspect elements on the web page. But we will use Firebug add-on which has more powerful feature.
Follows all steps to inspect elements in Mozilla Firefox using Firebug addon:
1. Install Firebug addon in Firefox from https://addons.mozilla.org/en-us/firefox/addon/firebug/.
2. To inspect an element on a page, move the mouse over the desired element.
3. Right-click to open pop menu and choose the option “Inspect Element with Firebug”. It will show HTML code in tree format.
Using Firebug, we can also check XPath using search box. Just enter XPath and Firebug will highlight the element that matches the expression.
Firebug also generates XPath for an element. For this, select the desired element in the tree, right-click on it, and select the option “Copy XPath” from the pop-up menu.
How to Inspect element in IE browser?
Similar to Google Chrome, Microsoft Internet Explorer also provides an in-built feature to inspect an element on the web page. Follow all the steps below to view HTML code of element on web page in IE browser:
1. To open Developer Tools, press F12 key. The developer tools section will be opened.
2. To inspect an element, click on the pointer icon and move the mouse over the desired element on the page whose HTML code is to be viewed.
3. The developer tool will highlight the HTML code of elements with blue outline and HTML code in tree format.
Hope that this tutorial has covered all important points related to how to find XPath for any element in Chrome browser. I hope that you will have understood to inspect elements in Mozilla Firefox and Internet Explorer.
Thanks for reading!!!