_edited_edited.png)
By
Manasa Arcot Venkataram
This blog I will explain different ways to use XPath in Selenium. Read along and practice to know more about the XPath with me.
Below are the 6 key concepts covered on XPath which will really help you to understand XPath on the whole and master it.
What is XPath in Selenium
What is XPath?
Types of XPath locators
XPath Examples
Different ways to write Dynamic XPath in Selenium.
Before going into the concept of XPath overall we need to know why exactly we need to find XPath in selenium. XPath is nothing but a unique ID or an address of a web element on the webpage. We can uniquely identify the web element on the web page using XPath which in turn is used to perform actions.
Now, let’s see what an XPath is in Selenium;.
What is XPath in Selenium:
XPath in selenium is a technique that allows us to navigate the structure of Webpage’s HTML. It is basically a syntax for finding elements on webpages. XPath can be used on both HTML and XML documents. The elements that are unable to find elements by locators such as ID, class or name can also be found using XPath in Selenium.
What is XPath?
XPath is nothing but the XML path. It is a syntax or language for finding elements on a web page using XML path expression. It is used to find the location of any element using HTML DOM structure. XPath can be used to navigate through elements and attributes in DOM.
In Selenium Automation, if you are unable to find elements using locators like ID, class, name, etc., on the web page then you can find it using Xpath.
The basic format of XPath is given below:
Syntax of XPath :
//tagname[@attributename=’value’]
// is used to select the current node.
Tag name is the name of a particular node.
@ is used to select the attribute.
Attribute is the attribute name of the node.
Value is used for the value of the attribute.
Types of XPath Locators :
In order to find the element on a webpage, there are a number of different types of locators. Here are few XPath locators with examples are given below:
XPath Locators
In order to find the element on a webpage, there are a number of different types of locators. Here are few XPath locators with examples are given below:
Find different elements on a web page.
1)ID
To find the element by ID of the element.
Syntax: driver.findElement(By.id (<element ID>))
2)Class name
To find the element by class name of the element.
Syntax:driver.findElement(By.name (<element name>))
3)Name
To find the element by name of the element.
Syntax:driver.findElement(By.name (<element name>))
4)Link Text
5)By partial link text
To find the element by text of the link.
Syntax: driver.findElement(By.linkText (<linktext>))
Locates a link using the link’s partial text
Syntax:driver.findElement(By.partialLinkText (<linktext>))
6)XPath
XPath required for finding the dynamic element and traverse between various
elements of the web page.
Syntax:driver.findElement(By.xpath (<xpath>))
7)CSS Selector
CSS selector also locates elements having no name, class, or ID.
Syntax:driver.findElement(By.cssSelector (<css selector>))
XPath Examples:
There are two types of XPath:
Absolute XPath/Full XPath
Relative XPath/Partial XPath
1)Absolute XPath:
Absolute XPath is the way of finding the element from the root node. Absolute XPath always begins with a single forward slash(/) which means you will select the element from the root node.
Absolute XPath is the direct way of finding the element from the root node. But, the disadvantage of absolute XPath is that if there are any changes made in the path of the element then the XPath will not work and it fails. Absolute XPath is considered a lengthy XPath.
Example for Absolute XPath :
Here is a link to access the page NumpyNinja
Absolute XPath: /html/body/div/div/div[3]/div/header/div/div[2]/div[2]/div/div/div[2]/p/span/span/span/span/a
In the above example, we see we have taken the Numpy Ninja hyperlink and found the absolute XPath from the root node.
2)Relative XPath:
For Relative XPath, the path starts from the middle of the HTML DOM structure. It starts with the double forward slash (//), which means it can search the element anywhere at the webpage.
You can start from the middle of the HTML DOM structure with no need to write a long XPath like in Absolute XPath. Relative XPath won’t fail if any changes are made in the path of an element as we are approaching the element directly to find the XPath.
Below is the example of a relative XPath expression of the same element shown in the below screen. This is the common format used to find elements through a relative XPath.
Example for Relative XPath :
Here is a link to access the page NumpyNinja
Relative XPath: //a[text ()=’Numpy Ninja’]
Example to show to find element using relative XPath
In the above Example for the same hyperlink Numpy Ninja we used Relative XPath to find the element. Where we used text() to find the element matching uniquely to identify the element. This approach of finding XPath of an element is considered more efficient when compared to that of Absolute XPath as we never know when there will be changes in the path of an element.
Different Ways to write Dynamic XPath in Selenium :
If you are testing with Selenium, these examples of writing XPath expressions will help your automation.
1. Basic XPath
XPath expression selects nodes or lists of nodes on the basis of attributes like ID, name, class name, etc. from the XML document as shown below.
Example : XPath=//*[@name=’email’]
Here is a link to access the page Amazon.com
Here are some more basic XPath expressions:
XPath=//input[@type=’email’]
XPath=//input[@id=’ap_email’]
XPath=//input[@className=’a-input-text a-span12 auth-autofocus auth-required-field’]
2. Contains()
Contains() is a method used in an XPath expression. It is used when the value of an attribute changes dynamically.
Example: Signup Information
Example refer to the NumpyNingaPage
The contains feature has an ability to find the element using partial text.
XPath: //*[contains(@id,’input_input_emailInput_SM_ROOT’)]
In this example, we tried to identify the element by just using the partial text value of the attribute. In the below XPath expression, partial value ‘input_input_emailInput_SM_ROOT’ is used.
In the above expression, we have taken the ‘id’ as an attribute and ‘nput_input_emailInput_SM_ROOT’ as a partial value as shown in the below screenshot.
3. Using OR & AND
In OR expression, two conditions are used, whether the first condition OR second condition should be true. It is also applicable if any one condition is true, or maybe both. This means that any one condition should be true to find the element.
In the below XPath expression, it identifies the elements whose single or both conditions are true.
Example:
XPath=//*[@id=’input_input_emailInput_SM_ROOT’ or @type=’email’]
Highlight both elements having attribute ‘id’ and element having attribute as ‘type’.
In the AND expression, two conditions are used. Both conditions should be true to find the element. It fails to find the element if any one condition is false.
Example: XPath: //input[@type=’email’ and @id=’input_input_emailInput_SM_ROOT_COMP5']
Below is the screenshot shown for the AND expression:
4. Starts-With Function
Starts-with function finds the element whose attribute value changes on refresh or any operation on the webpage. In this expression, match the starting text of the attribute used to find the element whose attribute changes dynamically. You can also find the element whose attribute value is static (does not change).
For example, suppose the ID of a particular element changes dynamically like:
And so on. But the initial text is the same. In this case, we use Start-with expression “input_input_”
id=”input_input_emailInput_SM_ROOT_COMP5"
id=”input_input_passwordInput_SM_ROOT_COMP5"
In the below expression, there are two elements with a class starting with “input_input_” So, XPath finds those elements whose ‘id’ is starting with ‘input_input_’
Example: XPath: //input[starts-with(@id,’input_input’)]
In the above screenshot we see there are two nodes selected as the nodes have the same text with which it starts as shown in the example.
5. Text()
In this expression, with the text function, we find the element with the exact text match as shown below. In this case, we find the element with text ‘Sign Up’
Example: XPath=//*[text()=’Sign Up’]
In the above example, if we use text() it shows two nodes matched as we have the same text() as Sign Up again. But, in a unique case where we matched only one node then you can use the text() as XPath to find the element.
6. Using Index:
This approach comes in use when you wish to specify a given tag name in terms of the index value you wish to locate.
XPath=(//*[@attribute=’value’])[index]
In the below expression, a DOM has multiple input tags for each different field value, and you wish to input text into the second field i.e. Last Name.
For Example we have used the NumpyNinjapage
XPath=(//input[@type=’text’])[2]
In the above example in the screenshot, you can see we have used the type as “text” and used index[2] to refer to the node of the input box of Last Name. If you don’t use [2] then it will refer to the node of the input box of First name.
This is all about XPath and I am sure you pretty much got the concept of all about XPath. Hope you all will like this blog. Thank You.
By
Manasa Arcot Venkataram