{"id":44570,"date":"2017-04-26T15:00:45","date_gmt":"2017-04-26T12:00:45","guid":{"rendered":"http:\/\/examples.javacodegeeks.com\/?p=44570"},"modified":"2017-04-26T14:38:45","modified_gmt":"2017-04-26T11:38:45","slug":"get-xpath-html-example","status":"publish","type":"post","link":"https:\/\/examples.javacodegeeks.com\/java-development\/core-java\/xml\/xpath\/get-xpath-html-example\/","title":{"rendered":"Get Xpath From Html Example"},"content":{"rendered":"

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.<\/p>\n

1. Introduction<\/h2>\n

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.\u00a0These path expressions look very much like the expressions you see when you work with a traditional computer file system.\u00a0XPath 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.<\/p>\n

In XPath, there are seven kinds of nodes: element, attribute, text, namespace, processing-instruction, comment, and document nodes.\u00a0XML documents are treated as trees of nodes. The topmost element of the tree is called the root element.\u00a0Atomic values are nodes with no children or parent.<\/p>\n

HTML is the standard markup language for creating Web pages. It\u00a0stands for Hyper Text Markup Language and\u00a0describes the structure of Web pages using markup.\u00a0HTML elements are the building blocks of HTML pages and\u00a0are represented by tags.\u00a0HTML tags label pieces of content such as “heading”, “paragraph”, “table”, and so on.\u00a0Browsers do not display the HTML tags, but use them to render the content of the page.\u00a0Everything you see on the page is an element. Every field, link, image, text and many things you don\u2019t 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<\/p>\n

2. Find XPath using Chrome<\/h2>\n

In this section we will learn how to use Chrome to find an XPath for an HTML element.\u00a0You 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.\u00a0Press F12 to open the website inspector.<\/p>\n

\"\"<\/a>
Figure 1. Chrome F12<\/figcaption><\/figure><\/p>\n

This will appear on the right side of the window.\u00a0Click 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.<\/p>\n

\"\"<\/a>
Figure 2. Chrome Highlight<\/figcaption><\/figure>
<\/div> <\/div><\/p>\n

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.\u00a0Select “Copy” => “Copy XPath.”<\/p>\n

\"\"<\/a>
Figure 3. Chrome Copy XPath<\/figcaption><\/figure><\/p>\n

This will copy the element’s XPath information to your clipboard.\u00a0Note that this just copies the minimal XPath information. Firebug for Firefox can give you the full XPath information.<\/p>\n

3. Find XPath using XPather<\/h2>\n

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.\u00a0Google 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).<\/p>\n

3.1 Add XPather extension to Chrome<\/h3>\n

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:<\/p>\n

\"\"<\/a>
Figure 4. Chrome Settings<\/figcaption><\/figure><\/p>\n

Go to Settings<\/em> and on the left hand side click Extensions.\u00a0<\/em>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\u00a0Chrome Web Store. Enter XPather<\/em> in the search window and press Enter:<\/p>\n

\"\"<\/a>
Figure 5. Chrome Web Store<\/figcaption><\/figure><\/p>\n

Click on ADD TO CHROME<\/em> button:<\/p>\n

\"\"<\/a>
Figure 6. XPather extension<\/figcaption><\/figure><\/p>\n

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.<\/p>\n

3.2 Features of XPather<\/h3>\n