Selenium with Javascript – XPath Introduction

by

XPath Introduction

Hi friends so we are going to see XPath today in this session.

What is XPath

We had discussed about 8 types of Locators in our earlier session of Selenium, and XPath is one of those Locators. So, XPath is a Locator, which helps in locating Elements.

XPath is called as xml path and it can be called as the path of the element from it’s root node or the immediate node.

Importance of XPath

There are 8 types of locators in Selenium, but we are discussing about XPath seperately, So there will be something speacial about XPath or you can say that XPath is an important type of locator.

Now, As we know that locators are used to locate element, and We can use some other locators like id, name or anything else to locate the Element, then why should we use XPath, what is so special about xpath.

So, the answer is that other locators like id, name or className are the attributes of an element, but what if an element doesn’t have these attributes, then what should we do, How should we locate that element, So XPath solves that problem for us.

XPath can locate any element for us.

Types of XPath

There are 2 types of XPath

  1. Absolute XPath
  2. Relative XPath

Absolute XPath

  1. It is an xml path of an element from root node.
  2. It always starts with forward Single slash (/).

Relative XPath

  1. It is an xml path of an element from middle of the html dom or immidiate node.
  2. It always starts with forward Double slash (//).
  3. Relative XPath is also called Dynamic XPath.

How to find XPath

if suppose we want to find out the XPath for any element then what do we need to do, we need to inspect that element and how do we inspect an element. We need to right click on the element and click on inspect and then we can see the html dom of the element is higlighted in console and then we need to press ctrl f and here we need to write xpath of element.

We can write Absolute Xpath or Relative Xpath in this.

Now, Let’s go to our Dummy eCommere Website and inspect any element and we see that the html dom of the element is highlighted in console.

So, Now, If we follow the xml path for this element upwards to the root node, then we can get the Absolute Xpath of this element.

If we follow the xml path for this element upwards to it’s immidiate node, then we can get the Relative Xpath of this element.

So, Now let’s find out the Absolute Xpath and Relative Xpath of an element.

Syntax of Xpath

  1. Syntax of Absolute Xpath – /html/body/div[1]/div[2]/div/div/main/div/ul/li[1]/div[1]/a[1]/img
  2. Syntax of Relative Xpath –
    • //tag_name[@attribute_name = ‘attribute_value’]
    • //*[@attributename = ‘attribute_value’]

There is nothing much to understand in the Syntax of Absolute Xpath,

  1. it is just an xml path from the root node to the respective element.
  2. We just need to mention the tag name of each node.
  3. We need to start with single slash.

But if we talk about syntax of Relative XPath, then we need to consider below things in mind.

  • Relative XPath starts with a double slash.
  • We have mentioned tagName in the first XPath, So only a selective type of Element will be highlighted, when we will inspect the element with that XPath, like if we will mention select in the tag_name, then the dropdown will be highlighted.
  • We have mentioned * in the 2nd XPath, So it is going to highlight all the elements with that attribute.
  • then we have mentioned @ before the attribute name, and this is compulsory for the relative xpath.
  • We have already discussed about Attribute Name and Attribute Value in our previous sessions.

Disadvantage of Absolute XPath

  1. Absolute XPath is the xml path of the element from the root node, So the length of the Absolute XPath is too big.
  2. Whenever HTML DOM structure changes, the xml path of the element from root node also changes for most of the elements, and that’s why the Absolute XPath also changes, and we need to change the absolute Xpath that time.
  3. This process of HTML DOM structure is very often, hence we need to change the absolute xpath quite often.
  4. It is very difficult to find the change in the absolute because the length of the absolute xpath is too big, So, It is very difficult to manage Absolute Xpath.

Note – We never ever use an Absolute Xpath because of all the above disadvantages.

Summary

We have covered below topics in this session.

  1. what is XPath
  2. Importance of XPath
  3. type of XPath
  4. Absolute XPath
  5. Relative XPath
  6. How to find XPath
  7. How to find Absolute XPath
  8. How to find Relative XPath
  9. Syntax of XPath
  10. Disadvantage of Absolute XPath

Leave a Comment