Introduction to Selenium Locators.

Often, Recording and playing back a recorded script using Selenium IDE and Webdriver is just a stepping stone to write a more meaningful test script(see my last blog). Almost, in all the cases, it serves as a template to add more code and to do more.

At times there are many facts which we used to overlook which seems very minute but turns to be very weird when comes to actual writing. While it may be a straight thing to use a locator strategy suggested by the recorded test, this is seldom useful while dealing with dynamic resources. One of them is finding locators.

There are many ways to detect locators in selenium. One way is via Selenium IDE,which records the user action and in return gives the locator. The other way is to find the locator via HTML from web page.

Locators can be written in several ways via xpath ,css, dom,etc.Most of the web sites have dynamic id’s ,classes, etc so which makes difficult to locate element on web page.For any element to locate in xpath you can use various methods like contains, siblings etc

Lets take an example of www.google.com website.

I opened www.google.com and try locating link=Design Thinking and Software Development there could be multiple ways to locate it. Lets try all one by one:

1.By clicking on link via name of the link

link=Design Thinking and Software Development

selenium.click("link=Design Thinking and Software Development");

2.By css ,to use this type you need to write css= in front of the locator

css=a..firepath-matching-node

selenium.click("css=a..firepath-matching-node")

3.By using xpath,in this particular case I have taken the link directly by using contains

//a[contains(text(),’Design Thinking and Software Development’)]

selenium.click("//a[contains(text(),'Design Thinking and Software Development')]");

4.By using xpath,this is called Xpath:relative i.e by giving the relative path of the HTML page.

//div[@id=’post-15910′]/h2/a

selenium.click("//div[@id='post-15910']/h2/a");

5.By using xpath and giving the link(href) in reference.

//a[@href=’http://xebee.xebia.in/2013/03/01/design-thinking-and-software-development/’%5D

selenium.click("//a[@href='http://xebee.xebia.in/2013/03/01/design-thinking-and-software-development/']");

6.By giving xpath:postion

//h2/a

selenium.click("//h2/a");

How to handle dynamic classes?

You can try with the contains() function.For example:If you have:

(Where “table” is static in all the dynamics ids)

You can try with: //table[contains(@id,”table”)]

If you have the same static text in the ID for different elements, you can add other attribute to the xpath. Basic principal with dynamic IDs is to find the pattern if any in the HTML.For example if your application has a table with dynamically generated rows, columns, classes and ids are generated based on some content or sequence, You can easily program-me that through test code. If you want to click on a link which contains xebia,then one ways it to use contains.

with css:

css=li[id*="text"]:contains("xebia")

With XPath:

//li[contains(@id,"text") and contains (text(),"xebia")]

What kind of browser and tools one can use in your strategy for different kinds of locators?

You can always use Firefox to locate any element on web.But chrome can also be use to locate elements via HTML code and tree structuring. Tool which can help you in locating is :Firebug and Selenium IDE Fireubg: Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.You can download firebug according to the firefox version you have in your machine.

For more info ,please visit : http://getfirebug.com/whatisfirebug