Many times I hear from people that my Selenium script is not executing properly for different browsers. So we keeps on complaining that selenium is not really identifying our web elements on different browsers. But if we look at it deeply, it’s not selenium; it’s the locator engine of your browser which is not able to understand your WebElement’s locator.
So lets talk about the browser’s locator engine, Every browser has different mechanism to process your locator i.e Xpaths, Css Selectors, Ids etc. So when we try to execute our same script on different browser, it might not identify the same element it was identifying on previous browser. So we need to create locator which has basic requirement to be robust for almost all browsers-
- Relative xpath over absolute xpath.
- Avoid using xpath or css selector if element itself has some unique attribute i.e. id, name, linkText, title.
- Verify your xpath before executing script (Saves a lot of time).
- Prefer using Css Selector over xpath if you creating your script for headless browsers like PhantomJs.
- Create your customized locator if needed.
Lets understand the syntax of an xpath-
When you have a unique attribute for your targeted locator
//tagname[@attributename='attribute value'] e.g. //input[@id='username'] when you don't aware of specific tag name
When you have no unique attribute but a parent of that element has some unique attribute
use double slash "//" if you are targeting to a grand child
Some Xpath methods-
- Contains() – When you want to select an element which contains some part of its attribute, for e.g. you wan to select an element which contains text “user” in its id-
- starts-with() – When you want to select an element whose attribute’s value starts with some text. For e.g. you wan to select an element whose ids starts with text “user”-
Handling text attribute – Sometimes we use Xpath methods with text attribute and it does not work. we need to understand that text is not an element’s attribute, its a function. So if you are applying above conditions for text then it would look like as below-
Handling parent-child nodes –
- accessing immediate parent – //tagname[@attribute=’attributevalue’]/parent::parenttag
e.g. //div[@id=’someid’]/parent::span – (here we are accessing parent span of some div child)
2. accessing grand parent – //tagname[@attribute=’attributevalue’]//ancestor::grandparenttag.
if there are multiple grandparent with same tag you can give index like below- //tagname[@attribute=’attributevalue’]//ancestor::grandparenttag
3. accessing nth-sibling (following and preceding) – Suppose we have a div element and its six child of tag span. We have id of first span but want to access 5th span based on first-
for preceding sibling – Suppose we have a div element and its six child of tag span. We have id of 6th span but want to access 1st span based on 6th
So this was just little information about xpaths, creating customized xpath etc. I will be posting another blog with detailed information about creating Css Selectors. Feel free to post comments in case of any concerns.
Happy Coding 🙂