Hi there!
Do you know or hear terms such as id, class, attribute, name? These are the best css selectors which you would like to use to find an element. But, sometimes it can be a pain for us when it is not formatted correctly or it is renamed. The best approach is to use XPath.
XPath locator is used to find the complex or dynamic elements, whose css attributes changes dynamically.
XPath can use absolute or relative path.
Absolute XPath is an absolute address from parent to child node, for example html/div/div[2]/div[3]/ul/li/span/a.
The expression begins from the root node. This expression either begin with the ‘/’ or the root node and traverse the whole DOM to reach the element.
Relative XPath expression is a lot more compact and use forward double slashes ‘//’. These XPaths can select the elements at any location that matches the selection criteria and doesn’t necessarily begin with root node.
The following block of codes are example of relative xpaths.
- Locate an element based on an attribute name(s) which match specify tag
//input[@id='username']
//input[@id='username' and @type='email']
//button[@id='loginBtn' and @type='submit']
//a[@href]
- Get all elements based on id which match any tag
//*[@id='name']
- Locate an element based on text()
//i18n-string[text()='Forgot my password']
//a//i18n-string[text()='Forgot my password']
//a[text()='Hello']
Be careful, using full url name, because the value can change .
//a[@href=’https://www.google.com/login.cfm?pr=1′%5D
- Locate an element by index position
By providing the index position in the square brackets, we can move to the nth element satisfying the condition
//Get 4th element
(//a[text()='Configure'])[4]
//Get 1st element
(//li[@class='setting']//a[contains(text(),'tag'])[1]
//Get 1st element
(//input[contains(@class,'form')])[[position()=1]
(//input[contains(@class,'form')])[1]
If XPath above is not able to find a web element, we need to use the functions: contains, sibling, ancestor.
- Using contains function we can match a particular text value.
For example, you need to find all dynamic elements where name attribute begins with name “test-“
//input[contains(@name,'test-')]
Another example, find all elements where id contains some text
<input "id = test_123">
<input "id = test_212">
//input[contains(@id,'test_')]
id=‘selenium test_123 automation’
//input[starts-with(@id,'test_')]
//input[ends-with(@id,'automation')]
//input[contains(@name,'username') and @type='text']
//input[contains(@name,'username') and contains(@type,'name'])
- Using following keyword, we can get a direct child web element.
//div[@class ='form']/input[@id='name']
//div[@class ='form']/input[@id='name']//following::input[@id='name']
//div[@id='name']/a
//div[@id='name']/child::a
- Using sibling keyword, we can get a web element on the which is related to some other element.
//div[@class ='form']/input[@id='name']//following-sibling::input[@id='name']
- Using ancestor keyword helps to find an element on the basis of the parent element.
//a[text()='some']//ancestor::div
//a[text()='some']//ancestor::div[@id='car']
‘/.’ means first parent (/././. reverse direction)
//a(text()='parent-test')/..
//a(text()=',parent-test')/../..
Let/s Chat 