Xpath is a powerful way to locate web elements on a web page. It stands for XML Path Language and it can be used to navigate through the structure and attributes of an XML document. In automation testing, especially with Selenium, xpath helps in identifying the web elements that we want to interact with.

In this blog post, we will learn some basic concepts and syntax of xpath and how to use it effectively in automation testing.

What is an Xpath?

An xpath is a sequence of steps that describes how to reach a specific node or a set of nodes in an XML document. A node can be an element, an attribute, a text, a comment or any other part of the document. It is very useful for Automation both on Web and similarly on Mobile app.

• An absolute xpath starts with a slash (/) and specifies the complete path from the root node to the target node. For example,

    /html/body/div[1]/h1
  

  means select the first div element under the body element under the html element and then select its h1 child element.

• A relative xpath starts with a double slash (//) and specifies the path from any node that matches the criteria to the target node. For example,

    //div[@id='main']
  

  means select any div element that has an id attribute with value 'main'.

How to write an Xpath?

There are different ways to write an xpath depending on what kind of web element we want to locate. The basic syntax of xpath is:

//tagname[@attribute='value']

This means select any tagname element that has an attribute with value 'value'.

For example,

//input[@type='text'] means select any input element that has a type attribute with value 'text'.

• // - start from anywhere in the web page

• input - an HTML tag, it can be any tag of HTML (p, button, span, div ... etc,.)

• type - an Attribute, it can be any HTML attr (id, class, link, src, alt ... etc,.)

• text - the value of an attribute type.

Another Example:

//a[@href='https://vannakne.github.io'] means select any anchor element that has a href attribute with value 'https://vannakne.github.io'.

Logical Operator

We can also use logical operators like AND, OR and NOT to combine multiple conditions in an xpath.

For example,

• //input[@type='text' AND @name='username'] means select any input element that has both type attribute with value 'text' and name attribute with value 'username'.

• //a[@href='https://vannakne.github.io' OR @class='link'] means select any anchor element that has either href attribute with value 'https://vannakne.github.io' or class attribute with value 'link'.

• //div[NOT(@id)] means select any div element that does not have an id attribute.

Functions

We can also use functions like text(), contains(), starts-with() and ends-with() to match partial or exact text values in an xpath. For example,

• //h1[text()='Welcome'] means select any h1 element that has exact text value 'Welcome'.

• //p[contains(text(),'Hello')] means select any p element that contains text value 'Hello'.

• //img[starts-with(@src,'logo')] means select any image element that has src attribute starting with value 'logo'.

• //span[ends-with(@id,'_title')] means select any span element that has id attribute ending with value '_title'.

Note: ends-with function works with only xpath 2.0 which most mordern browser does not support. However, if you still need to use ends-with, you can use it with css selector instead of xpath.

Example:

Instead of //span[ends-with(@id,'_title')] you can use span[id$='_title'] which is a CSS selector.

AXES

We can also use axes like parent, ancestor, ancestor-or-self, child, descendant, following, following-sibling, preceding and preceding-sibling to navigate through different nodes in relation to a given node in an xpath.

Basic Syntax

Axes::tagName[@attribute='value']

Important: Suppose that each box represent the id of the each elements with div tag:

Parent

Selects the parent of the current node.

Example:

//div[@id='Y2']/parent::* means select any element that is direct parent of div element with id 'Y2', which is B2 in our case.

Ancestor

Selects all ancestors (parent, grandparent, etc.) of the current node.

Example:

//div[@id='Y2']/ancestor::div[@id='B2'] means select div element with id B2 element that is ancestor of div element with id 'Y2'.

//div[@id='Y2']/ancestor::div[@id='A'] means select div element with id A element that is ancestor of div element with id 'Y2'. etc,.

Ancestor-or-self

Selects all ancestors of the current node and also includes the current node.

It is the same as Ancestor. Additionally, it included itself.

Child

Selects all children of the current node

Example:

//div[@id='B2']/child::* means select all elements that are direct children of div element with id B2.

//div[@id='B2']/child::div[@id='Y2'] means select div elements with id Y2 that are direct children of div element with id B2.

Descendant

Selects all descendants (children, grandchildren, etc.) of the current node.

Example:

//div[@id='B2']/descendant::* means select all elements that are descendants of div element with id B2.

//div[@id='B2']/descendant::div[@id='L1'] means select a div elements that are descendants of div element with id L1.

Following

Selects everything in the document after the closing tag of the current node.

Example:

//div[@id='B2']/following::* means select all elements that is following of div element with id B2.

Following-sibling

Selects all siblings after the current node.

Example:

//div[@id='B2']/following-sibling::* means select all elements that is following sibling of div element with id B2.

Preceding

Preceding is similar to following, but it points to the elements that are above itself while following points to the element below itself.

Example:

//div[@id='B2']/preceding::* means select all elements that come before div element with id B2.

Preceding-sibling

Similar to preceding but it points to only any elements that come before itself and is its sibling. Meaning it points to any element that shares a direct parent of itself.

Example:

//div[@id='B2']/preceding-sibling::* means select any element that is preceding sibling of div element with id B2.

Conclusion

I hope this introduction to Xpath has helped you understand the basics and syntax of using Xpath in automation testing. With the knowledge of these concepts, you can now locate web elements more effectively and efficiently.

In the next blog, we will dive deeper into more advanced concepts of Xpath and how to use them in your automation testing projects. So, stay tuned for more valuable information that will help you take your automation testing skills to the next level.