XPath Axes in Selenium

Introduction:

Xpath Axes are those axes that are used to search for multiple nodes in current XML document from the current node context.

These are the methods that are mainly used for find dynamic web elements which otherwise not possible by

identified with the help of ID, name, class name, link text, CSS selector .

Axes methods are used to find those elements which changes dynamically when we refresh the page or do any other operations.

Different XPath axes in selenium:

Now lets discuss each axes in detail:

1. Self

Self node means nothing but whichever node we start from.

Syntax:

//*[attribute=’value’]/self::tagname

2. Child

Child axes are used to traverse all child elements of the current html tag.

Syntax:

//*[attribute=’value’]/child::childtagname

Now let us seee one real time example on finding the child web element.

For finding Child XPath axes, we are to locate the sign-up button from the registration form present in the

Facebook application.

-> Open https://www.facebook.com/r.php URL in the browser.

-> And we have to inspect the registration form and custoon=mize the XPath for it.

Then using child XPath axes, we will locate the sign-up button, Which is as shown below:

Once after finding the XPath of the signup button using child axes, the code snippet of your program will be :

The above test script will launch the Google chrome browser and automate all the test scenarios.

3. Parent

Parent axes are used to traverse parent element of the current html tag.

Syntax:

//*[attribute=’value’]/parent::parenttagname

Now let us seee one real time example on finding the parent web element.

For finding parent XPath axes, we identify the search text box from the Google search button present in the Google search home page.

First, we will try to locate the Google search button, and through the parent axes will go to the search text box.

Follow the below steps:

• Open https://www.google.com URL in your Google Chrome browser.

• And first, inspect the Google search button.

And now, we are writing the XPath to locate the Google search text box using parent XPath axes.

Once after finding the XPath of the signup button using parent axes, the code snippet of your program will be :

The above test script will launch the Google chrome browser and automate all the test scenarios.

4. Following

Following XPath axes are used to traverse all element that comes after the current html tag.

Syntax:

//*[attribute=’value’]/following::tagname

Let us take one real-time example where we will try to identify the following web element.

For the following XPath axes, we identify the best sellers link from the amazon search text box present in the amazon home page.

First, we will try to locate the best sellers link and through the following axes.

Follow the below steps:

Open https://www.amazon.com URL in your Google Chrome browser.

And first, inspect the amazon search text box.

And now, we are writing the XPath to locate the Best Sellers link from the search text box using following XPath axes.

Once after finding the XPath of the Best Sellers link using following axes, the code snippet of your program will be :

The above test script will launch the Google chrome browser and automate all the test scenarios.

5. Preceding

Preceding XPath Axes are used to traverse all nodes that comes before the current html

tag.

Syntax:

//*[attribute=’value’]/preceding::tagname

Let us take one real-time example where we will try to identify the web element with the help of preceding axes.

For the following XPath axes, we identify the Select your address link from the amazon search text box present in the amazon home page.

First, we will try to locate the Select your address link and through the preceding axes.

Follow the below steps:

• Open https://www.amazon.com URL in your Google Chrome browser.

• And first, inspect the amazon search text box.

And now, we are writing the XPath to locate Select your address Link from Google search text box using preceding XPath axes.

Once after finding the XPath of the Select your address link using preceding axes, the code snippet of your program will be :

The above test script will launch the Google chrome browser and automate all the test scenarios.

6. Following-sibling

To identify the element using siblings as a reference, we will take help from the following-sibling XPath axes.Whenever element not able to identify using one or more attribute, parent html tag and grandparent html tag. In such cases, we can use the sibling keyword to identify the element uniquely.

Following-sibling XPath Axes are used to traverse from current html tag to next immediate html tag.

Syntax:

//current html tag[@attribute=’value’]/following-sibling::sibling tag [@attribute=’value’]

Let see a real-time example for the following-sibling case:

Follow the steps given below:

• Open URL: https://www.amazon.com in your Google Chrome browser.

• Then go to the navigation bar, and take one element as current html tag,

• In our case, we are taking Best Sellers as current html tag, andinspect the immediate html tag, which is Amazon Basic in the web page with the help of following-sibling.

While writing a customize XPath for the following sibling to locate the element in the console window.

The console window will highlight, as you can see in the below snapshot.

Once after finding the XPath of the Amazon Basics link using following-sibling axes, the code snippet of your program will be :

The above test script will launch the Google chrome browser and automate all the test scenarios.

7. Preceding-sibling

Whenever the element is not able to identify using one or more attribute, parent html tag, and grandparent html tag, in such cases, we can take the help of preceding sibling keyword to identify the element uniquely.

Preceding-sibling keyword will be used to traverse from current html tag to previous html html tag.

Syntax:

//current html tag[@attribute=’value’]/preceding-sibling::previous tag [@attribute=’value’]

Let us consider the above example, where we will try to identify a web element using preceding sibling present in UI.

Follow the steps given below:

• Open URL: https://www.amazon.com in your Google Chrome browser.

• Then go to the navigation bar, and take one element as current html tag,

• In our case, we are taking New Release as current html tag, andinspect the previous html tag, which is the Gift Idea in this particular example of the web page with the help of preceding-sibling.

While writing a customize XPath for the preceding sibling to locate the element in the console window.

The console window will highlight, as you can see in the below snapshot.

Once after finding the XPath of the Customer Service link using preceding-sibling axes, the code snippet of your program will be :

The above test script will launch the Google chrome browser and automate all the test scenarios.

8. Ancestor

The Ancestor XPath axes are used to traverse all the ancestor elements (grandparent, parent, etc.) of the current html tag.

Syntax:

//*[attribute=’value’]/ancestor::tagname

Let us take one real-time example where we will try to identify the ancestor web element.

For the ancestor XPath axes, we are finding the second field, which is the surname text box from the female radio button present in the Facebook registration form application.

To locate the second field,

First, we will identify the female radio button, and then go for the ancestor, and finally locate the XPath for the web element.

Follow the below steps:

• Open https://www.facebook.com/r.php URL in your Google Chrome browser.

• And firstly, inspect the female radio button.

Now, we are going to locate the ancestor from the above XPath, and from that we have to find our required field lastname.

Once after finding the XPath of the Customer Service link using ancestor axes, the code snippet of your program will be :

The above test script will launch the Google chrome browser and automate all the test scenarios.

9. Descendant

The next XPath axes are descendant which are used to identify the child and grandchild tag of the current html tag in the web pages.

Syntax:

//*[attribute=’value’]/descendant::tagname

Let us take one example where we will try to identify the New Releases link with the help of descendant XPath axes.

Follow the below steps to take the overview of the descendant axes:

• Open https://www.amazon.com URL in your Google Chrome browser.

• And inspect the navigation bar of the Amazon home page.

Let’s identify the first div tag of the page using relative XPath: //div[@id='nav-xshop-container']

And, execute the above XPath in the chropath, and notice the div tag is located on the developer tool console window.

After that, customize this XPath expression, and write the XPath for New Releases with the help of descendant axes.

After writing the XPath into the console, and it is showing only one matching node,

It means that we write the correct XPath for the particular web element, which is shown in below :

Once after finding the XPath of the New Releases link using descendant axes, the code snippet of your program will be :

The above test script will launch the Google chrome browser and automate all the test scenarios.