Categories
Uncategorized

All about Locators in Selenium

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 linkhttp://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.

Identifier locator in selenium
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
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 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.

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.

ID locators in Selenium
Locating element using ID locators



3.Name:-
Locating elements by name are very similar to locating by ID, except that we use the “name=” prefix instead.

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.

Name locator in Selenium
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 with value filter as Locators in Selenium
Name = Automation value = Selenium 


With index filter:-
Note:-Index starts with 0

Name locators with Index filter in Selenium ide
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)

Link Locator in Selenium

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.

DOM locators example selenium ide


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 on browsers 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 Selenium
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)

xpath locator in selenium
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, 

CSS Locator ID example Selenium IDE

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

Leave a Reply

Your email address will not be published. Required fields are marked *