Dynamic XPath in Selenium WebDriver

 

 

In the previous tutorial, I have explained about various locators like id, className, tagName, name, linktext and partiallinktext present in Selenium to locate web elements on web page. In this tutorial I will explain about another type of locator called XPath. 

In Selenium automation, if you are unable to locate a web element using id, class, name, etc, then XPath comes to picture to locate the web element. Full form of XPath is XML Path. It is use to locate a web element on a web page using HTML DOM structure. To know more about path, refer my previous blog. Below is the syntax of XPath

//: select the current node.
tagname: name of the tag of a particular node.
@: to select attribute.
Attribute: name of the attribute of the node.
Value: value of the attribute

1) Basic XPath  XPath expression select nodes based on ID, class, etc. from XML web page.

Go to http://www.facebook.com and inspect the Email or Phone textbox. How to inspect a web element on web page is explain in the previous blog. Some of the basic examples of XPath is display below:

By.xpath("//input[@name='email']")
By.xpath("//input[@id=’email’]")
By.xpath("//input[@type='email']")
By.xpath("//input[@class=’inputtext’]")
By.xpath("//*[@class=’inputtext’]")
By.xpath("//input[@class=’inputtext’][@type='email']")

In the last example, we have created XPath using multiple attributes for the single HTML tag.

Syntax

By.xpath("//a[@href='https://www.facebook.com/']")

2) Contains – It is used if value of any web element changes dynamically. Using this expression, you can find the element with partial text.

Syntax

By.xpath("//*[contains(@name,'passwd_')]")

3) OR & AND – OR & AND expression uses 2 conditions to identify a web element.

In case of OR, if anyone of the condition is true, then element will be located. Whereas in case of AND, both the conditions should be true to locate the element.

Syntax

By.xpath("//*[@class='inputtext' or @name='email']")

Here, if you observe, class – ‘inputtext’ is same for 2 web elements, so with OR condition it will locate 2 web elements.

Syntax

By.xpath("//*[@class='inputtext' and @name='email']")

4) Start-with function – This function finds the web elements whose value changes dynamically. In the expression, we will use that value of web element which doesn’t change. Let’s see a small example to use start-with() function.

Syntax

By.xpath("//*[starts-with(@id,'yui_3_18_0_3_1555510217471_')]")

5) Text() – This expression is used with the text function to locate an element with exact text. Let me show you how to use Text() method. 

Syntax

By.xpath("//*[text(),"Create an account"]")

6) Last() – Selects the last element (of mentioned type) out of all input element present.

Syntax

By.xpath("//input[@type='text'])[last()]")

There are 5 web elements with input type -text. But with this expression, it has selected the last one.

7) Position() – Selects the element out of all input element present depending on the position number provided

Syntax

By.xpath("//input[@type='text'])[2]")

8) Following – By using this we could select everything on the web page after the closing tag of the current node.

Xpath of firstname is as follows:-

By.xpath("//*[@name='firstname']")

To identify the input field of type text after the FirstName field, we need to use the below XPath.

By.xpath("//*[@name='firstname']//following::input[@type='text']")

To identify just the input field after the FirstName field, we need to use the below XPath.

By.xpath("//*[@name=’firstname’]//following::input[1]")

9)Preceding- Selects all nodes that appear before the current node in the document, except ancestors, attribute nodes and namespace nodes.

XPath of the LastName field is as follows

By.xpath("//*[@name='lastname']")

To identify the web element before lastname field is as follows

By.xpath("//*[@name='lastname']//preceding::input[1]")

To identify the input field of type text before the LastName field, we need to use below XPath

By.xpath("[@name='lastname']//preceding::input[@type='text']")

Now, lets write a small program to show the use of Xpath. In this program, 

  • Firefox is use as browser. 
  • The path of Mozilla Firefox driver sets by using System.SetProperty. Mozilla Firefox driver is called gecko, so do not get confused. 
  • driver.get is used to navigate to amazon  site. Search box of the webpage is located using XPath- (“//*[@id=’twotabsearchtextbox’]”))
  • sendkeys() is used to search for value hard drive. 
  • Search Button is clicked by using XPath –
    (“//*[@class=’nav-input’]”))
import java.util.concurrent.TimeUnit; 
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
 
public class Selenium_Site { 
      public static void main(String[] args) {
              System.setProperty("webdriver.gecko.driver","C:\\Users\\vibha\\Downloads\\geckodriver-v0.24.0-win64\\geckodriver.exe");
            WebDriver driver = new FirefoxDriver();
            driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
            driver.get("https://www.amazon.com//");
            driver.manage().window().maximize();

            //XPath for Search box
            driver.findElement(By.xpath("//*[@id='twotabsearchtextbox']")).sendKeys("hard drive");

            //XPath for search button
            driver.findElement(By.xpath("//*[@class='nav-input']")).click();
     }
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s