Xpath : a path to your WebElement locators

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
//*[@attributename=’attribute value’] 

When you have no unique attribute but a parent of that element has some unique attribute

//parentTagName[@parentattributename=’attribute value’]/targetedElementTagName
e.g. //table[@id=’userTable’]/div
use double slash "//" if you are targeting to a grand child

Some  Xpath methods-

  1. 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-
    //*[contains(@id,’user’)]
  2. 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”-
    //*[starts-with(@id,’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-

//*[contains(text(),’user’)]
//*[starts-with(text(),’user’)]

Handling parent-child nodes

  1. 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[1]

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-

//span[@id=’first_span_id’]/following-sibling::span[5]

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

//span[@id=’sixth_span_id’]/preceding::span[5]

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 🙂

 

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s