[Automation] Xpath in Selenium

What is Xpath? Xpath(XML Path Language) is a simple syntax (language) to specify elements and attribute values from XML/HTML documents that have a tree structure.

Web pages are usually written in HTML, so Xpath is often used to retrieve information on Web pages. When viewing the HTML of a web page in a browser (Chrome,Firefox,...), you can easily access the corresponding HTML document by pressing F12.

How Xpath works

Now let's see how Xpath works specifically. The image below is part of an HTML document

As above image we see HTML like a tree structure and has different levels. In this example, level 1 is bookingstore and level 2 is book. Title, author, year and price are all level 3.

Text that contains angle brackets (example: <bookstore>) is called a tag. Elements in HTML usually consist of a start tag and an end tag with content between them. It has the following form:

<00>(start tag)Content here..</oo>(end tag)

Xpath describes a hierarchy separated by slashed "/" and can specify another node from the base node similarly to URLs. In this example, to get the element "author" the Xpath would be:

/bookstore/book/author

Just like every file on your computer has its own path so the same with elements on a web page. Its path is described in Xpath. Xpath also can use "//" to omit the path in the middle (known as short Xpath) like follow example:

Absolute Xpath: /bookstore/book/author
Short Xpath : //author

How to get Xpath of elements

[For Google Chrome]

Press F12 to open developer tools .In the Element tab html, right click on the element.The Xpath for obtaining the element is copied to the clipboard by
[Copy] -> [Copy Xpath] in the menu.

[For Firefox]

With Firefox browser you need add extension "xPath Finder" to support you get xpath of elemens. To add xPath Finder goes to https://addons.mozilla.org/en-US/firefox/addon/xpath_finder/ via firefox and click 'Add' button.

After add extension you will see "xPath Finder" icon in right side of menu

To get Xpath: Open a web page by Firefox -> Click "xPath Finder" icon -> Click an element in the page -> The Xpath of that element will be displayed

To Conclude

This was an introduction to Xpath. In my opinion, Xpath is highly recommended because it makes it easy to use with scraping. I hope this gives you a basic understanding of what Xpath is in Selenium and I will introduce more about Xpath in other article. Thanks for you attention.