Xpath is one of the most powerful selectors used for identifying elements for Selenium automation. But as you start automating web applications extensively, you will find occasionally some trouble in finding unique selectors as multiple elements might have the same attributes. In those cases, you will need to use little complex selectors to traverse to the expected html element
Through this post, i will show you how to find out simple and advanced selectors using xpath.
Below is a snippet of HTML code from Wikipedia page for ‘TEST’ and i will be using this html code to find all selectors for this post
Basic Rules of Xpath selectors
- Xpath always Starts with //
- After the // follows the html tag names like //div //span //input //table
- AS //div would give you all the div elements – specific element is selected using attributes which are mentioned in the square brackets  –
- Xpath attributes preceded ‘@’ symbol and then followed by attribute value
SAMPLE XPATH SELECTOR – //TagName[@attributeName=’attributeValue’]
Below are some of the ways of identifying elements using Xpath selectors. I will start with the basic selector and then move to advanced xpath selectors.
- When you dont want to use tag names, wild card symbol * works like a charm to identify element with any of the tags
//*[@id='contentSub'] will find all the elements with attribute id as 'contentSub'
- Xpath can be also formed using text()
- Xpath selectors can contain multiple levels of html tag seperated by a /
- Using contains() function, you can find out elements without using the whole attribute value
//div[contains(text(),'te')] or //div[contains(@id='content')] contains partial values
- Xpath can also be formed using ‘or’ & ‘and’ using multiple attributes
//div[contains(@id,'firstheading') and contains(@class,'firstheading')]
- Using starts-with function, xpath can be written by having the first substring of an attribute
- Xpath selector are case sensitive on the attributes for eg- //div[@id=’CONTENTSUB’] will not work as a selector as the html contains attribute as ‘contentSub’ but there is a function called Translate that you can use to make the selector case insensitive
//div[contains(translate(text(), 'abcdefghijklmnopqrstuvwxyz', 'ABCDEFGHIJKLMNOPQRSTUVWXYZ').'CONTENTSUB')]
- if there are more than one same Tag element within a parent element, indexes can be used, however, using indexes is not recommended
//tr/td - this will pick the second td element within the parent tr
- Xpath to find a parent element is written by using the syntax /..
//div[@class='jump-to-nav']/.. this will point to its parent element //div[@id='bodyContent']
- Using ‘/’ after the ‘/..’ will select one of the childs of the parent using a given attribute value
- When multiple child nodes of same type are present, you can use the keyword preceding-sibling or following:sibling to find any of the siblings before or after a node
- There is a possibility of having spaces in the text inside the html where the normal text() = ‘text’ will not work. There is a function called normalize-space which will be help you to write a xpath selector that would ignore any spaces before or after the text.
//tr[normalize-space(text()) = 'test']
I am pretty sure this is all you would probably need to find any element using xpath. Either one of them or combination of them. But in case you find any issues with any element, please comment. I can help you out.