XPath Axes in Selenium


XPath axes in selenium are methods to identify those dynamic elements which are not possible to find by normal XPath method such as ID, Classname, Name, etc. 

Axes are so named because they tell about the axis on which elements are lying relative to an element.

Dynamic web elements are those elements on the webpage whose attributes dynamically change on refresh or any other operations.


The commonly useful XPath axes methods used in Selenium WebDriver are child, parent, ancestor, sibling, preceding, self, etc.  XPath axes help to find elements based on the element's relationship with another element in a document. 
We will learn on all methods of XPath axes with lots of examples in the next tutorial.

How to handle Complex and Dynamic Elements in Selenium using XPath?


There are following ways by which we can handle complex and dynamic element in selenium. They are as follows:

1. Basic XPath:

Basic XPath expression select nodes or list of nodes on the basis of attribute like ID, Name, Classname, etc from XML document.
For example:
           XPath = //input[@name='user-message']
Where,
          input ➡ tagname
          name ➡ attribute
          user-message ➡ value of attribute.

Let's find XPath of different elements on facebook for practice. Open the facebook page https://www.facebook.com and find the XPath of email and password elements. We hope that you know the technique of finding XPath in chrome browser. If not, go to below link first to learn:
1. Right-click on email box and go to inspect option. Now press ctrl+F. Write XPath by following basic syntax and on the basis of the below screenshot.

We will start to write XPath with //, followed by input tag, then we will use the select attribute, followed by its attribute name like name, id, etc, and then we will choose a value of attribute in single quotes.


Find XPath in chrome


XPath(email): //input[@id='email'] (1 of 1 matched)
Here, (1 of 1) means exact match. It indicates that there is only one element available for this XPath. 

If it is showing (1 of 2) or (1 of 3) and so on. In this case, you don't need to choose this XPath because there are multiple elements available with the same XPath.

Key points: 
If you find more than one elements matching the same XPath, do not choose that XPath. Try to write another XPath for that element and find one matched only (i.e. 1 of 1).

2. XPath Contains

Contains() is a method which is used to find the value of those attribute which changes dynamically. For example, login information. Contains() method has the following general form which is given below:
Syntax:
       XPath: //tagname[contains(@attribute, 'value')]

For example:
Let's try to find XPath of "Sign up button" on the Facebook web page for demo. Open Facebook page, right-click on sign up button, and go to inspect option. Now write XPath in the panel like this:
         XPath(Sign Up): //button[contains(@name, 'websubmit')]

Key points:
1. The main feature of contains() method is that it can find element with partial text. For example, let's find the same XPath for sign up button with partial text.
         XPath(Sign Up): //button[contains(@name, 'web')]

In this expression, we have taken "name" as attribute and "web" as partial text in the place of websubmit.

2. Contains() method can be used in any condition when you need to find XPath.
Similarly, 
     XPath(Female Radio button): //input[contains(@id, 'u_0_8')]
     XPath(New password): //input[contains(@id, 'u_0_13')]

Let's automate a scenario in which we will find elements by using contains XPath.

Scenarios to Automate:

1. Launch the Firefox browser by creating a WebDriver object.
2. Open Google Home page https://www.google.com.
3. Send the text into the search box.
4. Click on the search button.
5. Close the browser.

Let's look at a glance at the source code to automate the following scenario.
Program source code 1:
    package seleniumProject; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; public class GoogleHomePage { public static void main(String[] args) { // Create a WebDriver object. WebDriver driver = new FirefoxDriver(); // Maximize the Firefox browser. driver.manage().window().maximize(); // Store the home page URL in a variable URL of type String. String URL = "https://www.google.com"; // Call get() method using reference variable driver and pass URL as parameter to get method. driver.get(URL); // Wait for load home page completely. driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); // Find element "search box" by using findElement() method of WebElement. WebElement searchBox = driver.findElement(By.xpath("//input[contains(@name,'q')]")); // Send a text into search box. searchBox.sendKeys("Selenium"); // Click on search button WebElement sButton = driver.findElement(By.xpath("//input[contains(@name,'btnK')]")); sButton.click(); // Close the browser. driver.close(); System.out.println("Test successful"); } }
    Output: Test successful
In the following source code, we have found out XPath of elements by using the contains method.

3. XPath Starts-with

starts-with() is a method which finds those elements whose attribute value changes on refresh on the web page. This method checks the starting text of an attribute and find elements whose attribute changes dynamically.

We can also use this method to find elements whose attribute value is static (not changing). The syntax for starts-with() method is given below:
Syntax: 
          XPath: //tagname[starts-with(@attribute, 'value')]

For example: Let's find XPath of search button using starts-with() method on web page https://neilpatel.com/ubersuggest.
1. XPath(Search button): //span[starts-with(@class, 'field-submit-text')]
2. XPath(Keyword): //input[starts-with(@name, 'keyword')]

Let's automate a scenario where we will find XPath by using starts-with method.

Scenario to Automate:

1. Invoke the Firefox browser by creating a WebDriver object.
2. Open the web page URL https://www.neilpatel.com/ubersuggest.
3. Send a text into the search box.
4. Click on the search button.
5. Close the browser.

Let's see the program source code to automate the following scenarios.
Program source code 2:
    package seleniumProject; import java.util.concurrent.TimeUnit; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; public class StartswithExample { public static void main(String[] args) { // Create a WebDriver object. WebDriver driver = new FirefoxDriver(); // Maximize the Firefox browser. driver.manage().window().maximize(); // Store the home page URL in a variable URL of type String. String URL = "https://www.neilpatel.com/ubersuggest"; // Call get() method using reference variable driver and pass URL as parameter to get method. driver.get(URL); // Wait for load home page completely. driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); // Find element "search box" by using findElement() method of WebElement. WebElement searchBox = driver.findElement(By.xpath("//input[starts-with(@name, 'keyword')]")); // Send a text into search box. searchBox.sendKeys("Selenium WebDriver"); // Click on search button WebElement searchButton = driver.findElement(By.xpath("//button[starts-with(@type,'submit')]")); searchButton.click(); // Close the browser. driver.close(); System.out.println("Test successful"); } }
    Output: Test successful

4. XPath Ends-with

ends-with() method checks the ending text of an attribute and find elements whose attribute changes dynamically on refresh. It has the following syntax which is given below.
Syntax:
          XPath: //tagname[ends-with(@attribute, 'value')]

For example, if the ID of an element is a_1_password, it will find and return elements with _password at the end of ID.

5. Using "OR" Statement

In OR expression, two conditions are used and anyone condition either 1st condition or 2nd condition should be true to find element. It has the following general form.
Syntax:
         XPath: //tagname[XPath statement-1 or XPath statement-2]

For example:
Let's find the XPath of login button of facebook page.
       XPath(login button): //input[@value='Log In' or @type='submit'] In the above XPath expression, both XPath statements are true.

6. Using "AND" Statement

In AND expression, two conditions are used and both conditions must be true to find element. If anyone condition is false then XPath will be failed to find element. It has the following general form.
Syntax: 
     XPath: //tagname[XPath statement-1 and XPath statement-2]
For example: let us find XPath of sign up button on facebook page.
     XPath(Sign Up button): //button[@type='submit' and @id='u_0_19'] (1 of 1 matched).

7. XPath Text

The text() method is used to find elements with an exact match. The syntax for the text() method is given below:
Syntax:
        XPath: //tagname[text()='text_value']

For example, we will create XPath of text "Create a new account" of Facebook page using text() method.
       XPath(Create a new account): //div[text()='Create a new account'] where div is tagname.
Similarly,  XPath(Recent logins): //div[text()='Recent logins']

How to Create XPath of Links in Selenium?


We can easily determine XPath of any link in Selenium using text() method. For example, open the Google home page www.google.com

In this webpage, we will create XPath of Gmail link. When you will inspect it, you will see like this in the below screenshot:


Xpath of link using text method in selenium

Here, Gmail is text. So, let's find XPath for this link.
             XPath(Gmail): //a[text()='Gmail']

We can also write the same XPath using contains() method like this:
          XPath(Gmail): //a[contains(text(), 'Gmail')] (1 of 1 matched).
Similarly, 
          XPath(Images): //a[contains(text(), 'Images')] (1 of 1 matched).

Final words
Hope that this tutorial has covered almost all important points related to handling dynamic elements in selenium with examples. I hope that you will have understood XPath contains, starts-with, ends-with, OR, AND statement, text.
Thanks for reading!
Next ➤ XPath Axes: Ancestor, Following Sibling ⏪ Prev Next ⏩