All about Locators in Selenium – User friendly Tech help
Locators in Selenium?
n
When we created our first IDE script, we found that Editor comes with the tabular structure with 3 columns namely Command, Target and Value.
nThis structure is used by selenium core to simulate user actions on the application under test(AUT).Just a reminder of things again we have :-
n
nCommand:Is our action on the AUT like Set
nTarget:Is our control on which action need to be performed like Textbox
nValue:It signifies the value that need to be associated with the target using our command like UserName
n
nNow coming to our main point, what is locator exactly?
n
Locator: – These are used by Selenium to find and match the elements of our AUT with which it needs to perform some action(like clicking, typing, selecting, verifying).It is used in Target column of Selenium IDE.
n
nIn simple words it tells Selenium which HTML element of our application a command has to perform the action.
n
nLocating Principle:-
nlocatorType=location
n
Note: – The locator type can be omitted in many cases(like identifier,Xpath,dom)
n
Locator Type:-
nNote:Every object(control) visible on a webpage is a “WebElement”.
nSelenium has different ways of locating controls (web elements).
n
- n
- Identifier
- Id
- Name
- Link
- DOM
- XPath
- CSS
n
n
n
n
n
n
n
n
Note:- One recommendation to cross verify that correct locator is used , we can use Find feature(we have used the same in the below examples) in Selenium IDE, it is similar to Highlight in UFT object Spy.
n
n1.Identifier:-
nThe identifier locator strategy is used by default in Selenium. It works with the id and name attributes of the html tags. It will look for the first element that has the specified id .If no element has a matching id attribute, then the first element with a name attribute matching the location will be used. Personally we would avoid this way of locating elements as it can be ambiguous.
n
nIdentifier – ID(1st preference ) -> Name(2nd Preference)
n
nExample:-
nPrerequisites:-Please open the link “http://www.ufthelp.com/p/testpage.html” in Firefox and try to inspect the “UserName” textbox.
n
nSolution:-Identifier is UserName, as we know that it works on ID and Name, so when both are given it chooses ID to find the match.
n
n
 |
| Finding Identifier Value |
n
nVerify:-Lets verify it in IDE , if it is able to highlight the element(Background of corresponding element changes yellow) it means our identifier value is correct .
n
 |
| Finding element using Selenium IDE |
n
nOther Examples:-
nPassword Textbox : password (which is Name attribute as ID is missing)
n
nQuiz1:- What is the identifier value of SignIn Button on the same page?
n
n2.ID:-
nThis approach is considered superior compared to other locators, provided our web application adheres to the W3C specification (that is, all id’s on a page are unique). Unfortunately there are many cases when an element does not have an id (or the id is somehow dynamically generated and unpredictable). In these cases we will need to use an alternative locator strategy; however it may be worth asking the developers of the web application if they can add a ids to a page controls specifically for testing. It’s usually a trivial task for them and the robustness of whole tests will benefit them too.
n
nExample:-
nWe can use the above example for locating the element (username Textbox) but this time using ID locator rather than following identifier approach.
n
nSolution:- id = “userName” (we found above)
nVerify:- We have to use the locatortype & location while working with ID , not like identifier where we can directly use the location value.
n
n
 |
| Locating element using ID locators |
n
n
n3.Name:-
nLocating elements by name are very similar to locating by ID, except that we use the “name=” prefix instead.
n
nNote:–If multiple elements have the same value for a name attribute, then we can use filters to further refine your location strategy.
n
nExample of filters:“value” (default filter) , index.
n
nExample:
nWithout Filter:-We would use name property to identify the element.
n
 |
| Locating element by Name |
n
With Value filter:-
nWe have radio buttons with the same name but different values , so we would use value filter
n
 |
| Name = Automation value = Selenium |
n
With index filter:-
nNote:-Index starts with 0
n
 |
| index=0, refers to “Selenium” radio button |
n
Quiz2:-What can be index value incase we want to refer to the “UFT” element.
n
nImportant: – The above locators(ID,Name) are independent of the element type and location(they are attribute based, rather than structure) in the tree (UI) and thus if the developer moves the element or changes its type, Selenium can still locate it.
n
n4.Link:-
nThis approach uses a hyperlink in the web page to locate the element by using the text of the link.
n
nNote:-If two links with the same text are present, then the first match will be used.
n
nExample:- we have link with name “LearnMore”, so we would use it as locator (Link=LearnMore)
n
n
5.DOM:-
nThe Document Object Model (DOM), in simple terms, is the way by which HTML elements are structured. Selenium is able to use the DOM structure in accessing page elements.
n
nNote:-Since selenium core is able to interpret the dom as document so we generally remove the locator type and directly use the location value.(Thus we can omit DOM as locator Type and use directly the location value)
n
nWe implement it using locator as getElementById or getElementsByName.
nFor more on DOM
n
nExample:-
nWe can locate password object by its id, using getElementById
nwe can either use dom=document.getElementById(“password”) or direct value as we used in below image.
n
n
n6.XPath:-
n
nXPath is the language used when locating XML (Extensible Markup Language) nodes. While DOM is the recognized standard for navigation through an HTML element tree, XPath is the standard navigation tool for XML; and an HTML document is also an XML document (xHTML).
n
nNote:-It can access almost any element, even those without class, name, or id attributes.But it relies on browsers engine and its value can vary across browsers. Thus it is not recommended for cross-browser testing.
n
More on XPath
nXPath standards
n
nWord of Caution: Before implementation we can make sure that its value is not varying, this can be done by testing a same control for the the same page on both the browsers. Launch “Firebug for FF” and “F12 Developer Tools for IE”. And now try to find any one element on both by following the Xpath. We are coming on tutorial on finding XPath.
n
nTypes:–
nAbsolute and Relative XPath.(This one is recommended )
n
nAbsolute XPaths(prefixed with a “/”)contain the location of all elements from the root (html) and as a result are likely to fail with only the slightest adjustment to the application.
nBut Relative XPath(prefixed with a “//”), by finding a nearby element with an id or name attribute (ideally a parent element) we can locate your target element based on the relationship. This is much less likely to change and can make our tests more robust.
n
n
 |
| xPath v/s CSS Locator |
n
nExample:-
nNote:- we have already discussed about various xpath tools available for browsers.
n
nLet us identify the x-path of dropdownlist using FirePath (addon to Firefox)
n
n
 |
| X-path is calculated using FirePath for “select” dropdown list |
n
n7.CSS:-
nCSS (Cascading Style Sheets) is a language which is used for beautification of HTML controls like button should have green color.
n
nCSS uses Selectors for binding style properties to elements in the document. These Selectors can be used by Selenium as another locating strategy.
nLocating by CSS Selector is more complicated than the previous methods, but it is the most common locating strategy of advanced Selenium users because it can access even those elements that have no ID or name.(Like X-Path)
n
n
nExample:- Using CSS ID,
n
 |
n
Quiz3:-What would be value of CSS locator incase we have class=password, instead of id=password in above image.
nWhat is ID/Class in CSS
n
nDifference between ID/Class
n
Note:- XPath can walk up the DOM (e.g. from child to parent is possible), whereas CSS can only traverse down the DOM (e.g. from parent to child)
n
nRecommended Priority:-
n
nPlease try to follow the priority order as ID > Name > CSS >XPath
n
For more comprehensive structure for DOM,XPath and CSS refer this link
n
nAnswer to Quiz:-
nQuiz1 :- SignIn
nQuiz2:- Index=1
nQuiz3:- css=input.password
