Home » Core Java » xml » XPath » Get Xpath From Html Example

About Mohammad Meraj Zia

Mohammad Meraj Zia
I did my Engineering in Information Technology from IET, Lucknow, India. Currently doing MSc in Information Technology from Derby University. I have worked in Java/J2EE domain for the last 10 years. Have good understanding of Payment and Finance domains.

Get Xpath From Html Example

In this example we will learn how to find the XPath of a given element in HTML. We will try to use different tools to achieve this.

1. Introduction

XPath is a W3C recommendation. It can be used to navigate through elements and attributes in an XML document. It is a syntax for defining parts of an XML document. It uses path expressions to select nodes or node-sets in an XML document. These path expressions look very much like the expressions you see when you work with a traditional computer file system. XPath expressions can be used in JavaScript, Java, XML Schema, PHP, Python, C and C++, and lots of other languages. It contains a library of standard functions.

In XPath, there are seven kinds of nodes: element, attribute, text, namespace, processing-instruction, comment, and document nodes. XML documents are treated as trees of nodes. The topmost element of the tree is called the root element. Atomic values are nodes with no children or parent.

HTML is the standard markup language for creating Web pages. It stands for Hyper Text Markup Language and describes the structure of Web pages using markup. HTML elements are the building blocks of HTML pages and are represented by tags. HTML tags label pieces of content such as “heading”, “paragraph”, “table”, and so on. Browsers do not display the HTML tags, but use them to render the content of the page. Everything you see on the page is an element. Every field, link, image, text and many things you don’t see are all elements. An element is equivalent to a tag in HTML, though there can be elements on a page that did not come from the HTML source

2. Find XPath using Chrome

In this section we will learn how to use Chrome to find an XPath for an HTML element. You don’t need any extensions installed to be able to find the XPath information of website elements when you’re using Chrome. Open the website you want to inspect in Chrome. Press F12 to open the website inspector.

Figure 1. Chrome F12

This will appear on the right side of the window. Click the element inspector button. You’ll find this in the top-left corner of the website inspector panel. The button looks like a box with a mouse cursor pointing at it. Click the element on the website that you want to inspect. You’ll see the elements of the site highlight as you move your cursor over them.

Figure 2. Chrome Highlight

Right-click the highlighted code in the inspector panel. When you click an element with the inspector, the relevant code will highlight automatically in the inspector panel on the bottom of the window. Right-click the highlighted code. Select “Copy” => “Copy XPath.”

Figure 3. Chrome Copy XPath

This will copy the element’s XPath information to your clipboard. Note that this just copies the minimal XPath information. Firebug for Firefox can give you the full XPath information.

3. Find XPath using XPather

In this section we will see how we can use Google Chrome to find the XPath of an HTML element. We will make use of an extension called XPather. Google Chrome Extensions are browser extensions that modify the Google Chrome browser. These extensions are written using web technologies like HTML, JavaScript, and CSS. Google Chrome Extensions are downloadable through the Chrome Web Store (formerly the Google Chrome Extensions Gallery).

3.1 Add XPather extension to Chrome

In this section we will see how to add the XPather extension to Google Chrome. Open Chrome and click on the three vertical dots on the top right corner:

Figure 4. Chrome Settings

Go to Settings and on the left hand side click Extensions. Now go to the bottom of the screen and click ‘Get more extensions’. A new window will be open where you will be able to download more extensions from Chrome Web Store. Enter XPather in the search window and press Enter:

Figure 5. Chrome Web Store

Click on ADD TO CHROME button:

Figure 6. XPather extension

On the new pop-up click on the Add Extension button. Chrome will install the extension. To check if the extension was successfully installed check for the little magnifier symbol surrounded by a square box on the top right corner of Chrome.

3.2 Features of XPather

  • XPather lets you search by evaluating XPath using jQuery.
  • The results are highlighted instantly.
  • The matched nodes contents are available in the sidebar.
  • It lets you find matched node on page by clicking it in sidebar.
  • There are shortcuts for functions and attributes.

Keyboard shortcuts

Alt+X: toggle XPather
Alt+Shift+X: toggle XPather Sidebar (when XPather is active)
Alt+Z: autocomplete XPather input

All shortcuts are customizable using “Keyboard Shortcuts” option located on the bottom of Chrome extensions page (chrome://extensions).

4. Use Firebug

In this section we will learn how to use Firefow to find an XPath of an HTML element. You can find XPath information for website elements using most browsers’ developer tools. Firebug for Firefox allows you to copy XPath information directly to your clipboard. Firebug is a web inspector add-on for Firefox

4.1 Install Firebug

First we need to install Firebug Add-on. Open Firefox and go to Add-ons. Click on ‘Add to Firefox’ button.

Figure 7. Firebug Add-on

Firefox will install the Firebug. Once that is installed you will see a big icon in to top right hand corner:

Figure 8. Firebug icon

Now open the website that you want to inspect. You can use Firebug to inspect any element on a website to find the XPath. Click the Firebug button. You’ll find this in the upper-right corner of the window. This will open the Firebug panel at the bottom of the Firefox window.

Figure 9. Firebug Panel

Click the element inspector button. You’ll find this in the top row of buttons in the Firebug panel at the bottom of the window, directly to the right of the Firebug Options button. It looks like a box with a mouse cursor pointing at it. Click the web page element that you want to inspect. As you move your cursor over the web page, you’ll see different elements get highlighted. Click the one that you want to find the XPath for. Right-click the highlighted code in the Firebug panel. When you click an element in a web page, it’s related code will be highlighted in the Firebug panel at the bottom of the window. Right-click this highlighted code. Select “Copy XPath” from the menu. This will copy the element’s XPath information to your clipboard. If you select “Copy Minimal XPath,” just the basic XPath information will be copied.

5. Conclusion

In this article we learned about XPath and it’s various usages. We also discussed what is an HTML and where it is used. We saw how we can grab the XPath of an HTML element using browsers like Chrome and Firefox. Similar kind of functionality is also present in other browsers as well e.g. Safari, IE etc

(No Ratings Yet)
1 Comment Views Tweet it!

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

 

and many more ....

 

Receive Java & Developer job alerts in your Area

 

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Saheli Das Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Saheli Das
Guest
Saheli Das

The text is “Investors/ Lenders get access to creditworthy borrowers to lend funds as per their risk appetite and gain attractive stable returns or monthly income to create wealth.”

== $0
Investors/ Lenders
“get access to creditworthy”
borrowers
“to lend funds as per their risk appetite and gain attractive stable returns or monthly income to create wealth.

How to find xpath for html code ?