Tips & Techniques for Writing Smart Locators(xPath, CSS) in Selenium Webdriver

Most of the times when I coach people on the topic of “Understanding and Identifying Locators Smartly in Selenium Webdriver”, people get confused between various locator techniques. Also, they forget the shortcuts for identifying locators and how to write smart “xPath”, instead they use long xPath values from browser add-on’s.

So, here are the tips on how to write smart xPath and Locators.

There are various ways for writing Locators in Selenium Webdriver. Normally, users would prefer to use some form of browser add-on’s like “FirePath” for identifying the xPath/CSS of the element.

Example of xPath:    .//*[@id=’container’]/div/div/header/div[2]/div/div[1]/ul/li[8]/a

But, apart from xPath Selenium gives support for various other techniques, which are described below with an example:

Using ‘By’ with Locators:

Way 1: Using “findElement” method

WebElement Ele = driver.findElement(By.xpath(“xpath_Expression”));

Way 2: Using ‘@FindBy’ Annotation from TestNG

@FindBy(xpath = “.//*[@id=’container’]/div/div/header/div[2]/div/div[1]/ul/li[8]/a”)

           public static WebElement loginButtonOnHeader;

18._Locator_Techniques

Tips for writing Smart xPath and Locators

Never go for absolute xpath

Ex: Flipkart login page
Username field: .//html/body/div/div/div/div[3]/div[1]/div/div[4]/div[2]/input

Relative xPath (use only as last option)

Ex: Flipkart login page
Username field – .//*[@id=’fk-mainbody-id’]/div/div[3]/div[1]/div/div[4]/div[2]/input
Password field – .//*[@id=’fk-mainbody-id’]/div/div[3]/div[1]/div/div[4]/div[4]/input

Ex: Flipkart profile dropdown:
Account – .//*[@id=’container’]/div/div/header/div[2]/div/div[1]/ul/li[7]/ul/li[1]/a
Orders – .//*[@id=’container’]/div/div/header/div[2]/div/div[1]/ul/li[7]/ul/li[2]/a
Logout – .//*[@id=’container’]/div/div/header/div[2]/div/div[1]/ul/li[7]/ul/li[10]/a

Dynamic xpath

Ex: Flipkart profile dropdown
Account – .//*[@id=’container’]/div/div/header/div[2]/div/div[1]/ul/li[7]/ul/li[1]/a
orders – .//*[@id=’container’]/div/div/header/div[2]/div/div[1]/ul/li[7]/ul/li[2]/a
logout – .//*[@id=’container’]/div/div/header/div[2]/div/div[1]/ul/li[7]/ul/li[10]/a

Now identify the pattern & make it dynamic:
String xpathStart = “.//*[@id=’container’]/div/div/header/div[2]/div/div[1]/ul/li[7]/ul/li[“;
int i = 1;
String xpathEnd = “]/a”;
String xpathDynamic = xpathStart + i + xpathEnd;

Using ID & CSS instead of xpath

Ex: Gmail
Username field xpath: .//*[@id=’Email’]
Password field xpath: .//*[@id=’Passwd’]

Username field ID: Email
Password field ID: Passwd

Username field CSS: #Email
Password field CSS: #Passwd

Why not to use CSS more often:

Ex: Flipkart homepage
‘Electronics’ menu > ‘Mobile’ category
CSS value:    .heading>a

Using shortcuts in xPath:

Sample situations to use such shortcut’s: Table, Drop-down, Link, Button, etc.

Ex: Flipkart Homepage before login, for ‘Log In’ button link in header:
//*[text()=’Log In’]

Ex: Flipkart Homepage after login, for Welcome msessage “Hi Yash” in Header (right-top corner)
relative xpath: .//*[@id=’container’]/div/div/header/div[2]/div/div[1]/ul/li[7]
shortcut xpath1: //*[contains(@class,’_2sYLhZ _2mEF1S’)]
shortcut xpath2: //../li[contains(@class,’_2sYLhZ _2mEF1S’)]

Ex: Flipkart Logout link:
//*[text()=’Log Out’]

Button Text xPath:

If the button is declared with the <button> tag and the button says “press me”, try this:
//button(contains(., ‘press me’)]

If the button is of submit button type (declared with the <input> tag and type=”submit” or =”button”) and says “press me”, try this:
//input[@value=’press me’]

Text of Element:

Sometimes a bit of text is styled as a link or button. To find it, try this:
//*[text()=’the visible text’]

Boot-Strap Drop-down item:

dropDownButton.click();     //expand the drop-down menu by clicking or hovering on it.

../ul/li[text()='”+itemName+”‘]  //This way you can identify the element from drop-down menu

The Nth Element:

To find the Nth element, you must surround your xPath in ()s and then specify the Nth using [n], like this:
(xPath)[n]

A very simple example – find the 3rd link on a page:
(//a)[3]

To find the 4th text input field on a page:
(//input[@type=”text”])[4]

You can also traverse from the indexed element. So, to find the link in the 2nd div with class ‘abc’:
(//div[@class=’abc’])[2]/a

Example Syntax to work with Image

xPath=//img[@alt=’image alt text goes here’]

Example syntax to work with table

xPath=//table[@id=’table1′]//tr[4]/td[2]
xPath=(//table[@class=’nice’])//th[text()=’headertext’]/

Example syntax to work with anchor tag

xPath=//a[contains(@href, ‘href goes here’)]
xPath=//a[contains(@href, ‘#id1’)]/@class

Example syntax to work with input tags

xPath=//input[@name=’name2′ and @value=’yes’]

Advertisements

2 thoughts on “Tips & Techniques for Writing Smart Locators(xPath, CSS) in Selenium Webdriver

  1. for making more dynamic, instead of concatenation use MessageFormat, no need to initialize more variable

    for example :
    String xpathDynamic = “.//*[@id=’container’]/div/div/header/div[%s]/div/div[1]/ul/li[7]/ul/li[%s]/a”

    And wherever you wanna use, simply write
    String xapthFinal = String.format(xpathDynamic,’2′,’1′) // %s will replace 2 and 1 in xpathDynamic

    BTW, nice article.. (y).

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