multiple identifiers are present for the same element.
What you will learn
• What are the different locators, which can be used to identify element?
• How to get the handle of element you need to write your selenium test?
• What should be the strategy to choose the locator when there are lots of options?
What you should know
• A high level idea of HTML elements.
• A brief hands on experience of Selenium.
While writing the GUI functional test, we interact with objects which are textbox, button, label, drop down etc.
The success of any automation tool is primarily based on how easy and accurate it is to identify those objects (also known as elements). So let’s understand in some detail how to identify elements and what Selenium has to offer.
Selenium offers 2 different api’s at the driver instance level; findElement and findElements. The first one return the element it founds based on the criteria specified and the latter actually gives you the list of matching elements it founds.
Location of element is driven by couple of identifiers, which is evident from the below list.
Figure 1. Location of element
className(String className) helps find the elements based on the value of the “class” attribute.
Listing 1. Code sample
driver.findElement(By.className(“Hotels”)).click();
id(String id) helps find the elements based on the value of the “id” attribute. Refer the pic below to see how the id attribute (with value “origin_autocomplete”) is specified in HTML and the usage of it.
Listing 2. Code sample
driver.findElement(By.id(“origin_autocomplete”)).sendKeys(“test”);
linkText(String linkText) helps to find elements based on the value of the text. Generally these are used when you don’t find “id” or “className”. Refer the screenshot below for the usage of it.
Listing 3. Code sample
driver.findElement(By.linkText(“My Trips”)).click();
name(String name) helps to find the elements based on the value of the “name” attribute.
If you refer the picture 3 above, you will notice that one of the attributes for the input field is “name” with value “origin”.
driver.findElement(By.name(“origin”)).sendKeys(“Bangalore”);
partialLinkText(String linkText) helps to find the elements based on the
given link text. In picture 5 below, there is a link on the website with text “Tell us what you think”, we can very well use partialLinkText for such kind of links. Implementation is shown below.
Listing 4. Code sample
driver.findElement(By.partialLinkText(“Tell us what you think”)).click();
xpath(String xPathExpression) helps to find the elements based on the XPath. XPath stands for XML Path Language and basically provide you a way for traversing to the element through a hierarchical structure of a XML document. There is couple of browser add-ons that could be used to get the XPath of an element, some of them being:
• Firebug (https://addons.mozilla.org/en/firefox/addon/firebug)
• XPather (https://addons.mozilla.org/en-US/firefox/addon/xpather)
If you use any of the above tool to find out xpath for the element highlighted in Picture 3, you would find it as mentioned below.
XPath = //*[@id=’origin_autocomplete’]
So the same implementation could be expressed in a different way using XPath.
driver.findElement(By.xpath(“//*[@id=’origin_autocomplete’]”)).sendKeys(“Bangalore”);
cssSelector(String selector) helps to find the elements based on the CSS patterns specified. We plan to not divert ourselves into the detail of what is CSS, how to construct cssSelector etc.
However we will tell you an easy way to figure out the selector. If you are using Firefox as the browser, install Firebug and Fire Path add on.
Once these add ons are installed, select the element you want to use and right click on it to select “Inspect element with Firebug”. On the highlighted element in the HTML Tree in the Firebug window, right click to select “Copy CSS Path”.
Once you get the CSS path, the above test can be expressed using cssSelector.
driver.findElement(By.cssSelector(“input#origin_autocomplete.autocomplete”)).
sendKeys(“Bangalore”);
To summarize what we discussed just now, there are different ways to identify an element. And each identifier has it’s own pros and cons.
id or className is the most simplest and easy to use locators. An advantage with them is, it increases the readability of your test code. It’s also better than other locators in terms of test performance.
However if you are using lot of id’s and your test code is becoming too clumsy.
One suggestion here would be to have a separate file and then probably you can put more meaningful name to them if they are not properly named in the page source (example: Google search textbox on the home page has the value “q” for the attribute id).
linkText or partialLinkText is mostly used with links and are limited to that. They are easy to use. However they are a little problematic to maintain because of often changing link texts.
XPath is simple to use but makes your test code look ugly. XPath should generally be used when the object is having neither id nor className. When we run the test that uses XPath, browser runs it XPath processor to check if it can find any object. This actually impacts the test performance.
One important thing that we tend to forget while using XPath is, to ensure the order of the elements. So it should be ideally used to verify some object with respect to certain other object.
About the Author
Nishant is a Computer Science Engineer by education and has close to 8 years of experience in Test Automation & Management domain, which spans over different companies and multiple projects. He has also worked extensively on test automation tools like Selenium, Watin, QTP, Loadrunner in past and is currently working as a Lead QA Consultant with ThoughtWorks Technologies. He maintains his own websitewww.nishantverma.com and actively right articles on Testing Techniques, Test Automation, Agile Testing and Tool Comparison. His hobby is reading and writing blogs, listening music and reading books.