Locators in Selenium?

When we created our first IDE script, we found that Editor comes with the tabular
structure with 3 columns namely Command, Target and Value.
This structure is used by selenium core to simulate user actions on the application under
test(AUT).Just a reminder of things again we have :-

Command:Is our action on the AUT like Set

Target:Is our control on which action need to be performed like Textbox
Value:It signifies the value that need to be associated with the target using our
command like UserName

Now coming to our main point, what is locator exactly?

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.

In simple words it tells Selenium which HTML element of our application a command
has to perform the action.

Locating Principle:-
locatorType=location

Note: - The locator type can be omitted in many cases(like identifier,Xpath,dom)

Locator Type:-
Note:Every object(control) visible on a webpage is a WebElement.
Selenium has different ways of locating controls (web elements).

Identifier

Id

Name

Link

DOM

XPath

CSS

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.

1.Identifier:-
The 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.

Identifier - ID(1st preference ) -> Name(2nd Preference)

Example:-
Prerequisites:-Please open the link "http://www.ufthelp.com/p/testpage.html" in Firefox
and try to inspect the "UserName" textbox.

Solution:-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.

Finding Identifier Value

Verify:-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 .

Finding element using Selenium IDE

Other Examples:-
Password Textbox : password (which is Name attribute as ID is missing)

Quiz1:- What is the identifier value of SignIn Button on the same page?

2.ID:-
This approach is considered superior compared to other locators, provided our web
application adheres to theW3C specification (that is, all ids 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. Its
usually a trivial task for them and the robustness of whole tests will benefit them too.

Example:-
We can use the above example for locating the element (username Textbox) but this
time using ID locator rather than following identifier approach.

Solution:- id = "userName" (we found above)

Verify:- We have to use the locatortype & location while working with ID , not like
identifier where we can directly use the location value.

Locating element using ID locators

3.Name:-
Locating elements by name are very similar to locating by ID, except that we use
the "name=" prefixinstead.

Note:-If multiple elements have the same value for a name attribute, then we can use
filters to further refine your location strategy.

Example of filters:value (default filter) , index.

Example:
Without Filter:-We would use name property to identify the element.

Locating element by Name

With Value filter:-

We have radio buttons with the same name but different values , so we would use value
filter
 Name = Automation value = Selenium

With index filter:-

Note:-Index starts with 0

index=0, refers to "Selenium" radio button

Quiz2:-What can be index value incase we want to refer to the "UFT" element.

Important: - 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.

4.Link:-
This approach uses a hyperlink in the web page to locate the element by using the text
of the link.

Note:-If two links with the same text are present, then the first match will be used.

Example:- we have link with name "LearnMore", so we would use it as locator

(Link=LearnMore)

5.DOM:-
The 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.

Note:-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)

We implement it using locator as getElementById or getElementsByName.

For more on DOM

Example:-
We can locate password object by its id, using getElementById
we can either use dom=document.getElementById("password") or direct value as we
used in below image.
6.XPath:-

XPath 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).

Note:-It can access almost any element, even those without class, name, or id
attributes.But it relies onbrowsers engine and its value can vary across browsers. Thus it
is not recommended for cross-browser testing.

More on XPath
XPath standards

Word 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.

Types:-
Absolute and Relative XPath.(This one is recommended )

Absolute 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.
But 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.
 xPath v/s CSS Locator

Example:-
Note:- we have already discussed about various xpath tools available for browsers.

Let us identify the x-path of dropdownlist using FirePath (addon to Firefox)

X-path is calculated using FirePath for "select" dropdown list

7.CSS:-
CSS (Cascading Style Sheets) is a language which is used for beautification of HTML
controls like button should have green color.

CSS uses Selectors for binding style properties to elements in the document. These
Selectors can be used by Selenium as another locating strategy.
Locating 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)

Example:- Using CSS ID,

Quiz3:-What would be value of CSS locator incase we have class=password, instead of

id=password in above image.
What is ID/Class in CSS

Difference between ID/Class

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)

Recommended Priority:-

Please try to follow the priority order as ID > Name > CSS >XPath

For more comprehensive structure for DOM,XPath and CSS refer this link

Answer to Quiz:-
Quiz1 :- SignIn
Quiz2:- Index=1
Quiz3:- css=input.password