How To Find Web Element Using Web Browser Inspector

All the popular browsers provide an Html page web element inspector, you can easily check out the webpage structure use those built-in tools. Chrome, Firefox, Safari, Microsoft Edge all has it’s own built-in inspector. This article will tell you how to use all those web browser’s inspector and how to get an Html web element absolute / relative XPath value with the inspector.

1. How To Use Inspector To Get Absolute Or Relative XPath In Google Chrome, Firefox, Safari, Microsoft Edge.

1.1 Get Html Web Element XPath With Google Chrome Inspector.

1. Right-click the web element in the web page opened in the google chrome web browser.
2. Click the Inspect menu item in the popup menu list to open the inspector window.
3. It will focus on the web element in the inspector window Elements tab.
4. Right-click the focused web element in the inspector window.
5. Click Copy —> Copy XPath menu item to copy the relative Xpath value, click Copy —> Copy full XPath menu item to copy the absolute Xpath value.

1.2 Get Html Web Element XPath With Firefox Inspector.

1. Right-click the web element in the web page opened in the Firefox web browser.
2. Click the Inspect menu item in the popup menu list to open the inspector window.
3. It will focus on the web element in the popup window Inspector tab.
4. Right-click the focused web element in the Inspector window.
5. Click the Copy —> XPath menu item to get the absolute XPath value.
6. If you want to get the relative XPath value in Firefox, you need to install some extensions such as TruePath.
7. Click the Open Application Menu icon on the top right of the Firefox web browser.
8. Click the Options menu item in the drop-down menu list.
9. Click the Extensions & Themes menu item on the bottom left of the Options page.
10. Input the keyword relative xpath in the Find more add-ons search box and click the Enter key to search.
11. It will open a new window, and search out a list of XPath operator extensions, you can install the one you like to use it.

1.3 Get Html Web Element XPath With Microsoft Edge Inspector.

1. Microsoft Edge provides the same function to Google Chrome.
2. The steps and menu items name is the same.
3. The menu items are all Copy —> Copy XPath, Copy —> Copy full XPath.