Selenium uses locators to access the HTML elements from a web page. Locators can find and match any elements inside the page DOM. We can use locators to perform actions on any GUI elements (Textbox, Checkbox, Buttons, Radio buttons, dropdowns, links etc.).
Using the locators to identify the correct elements is the basic pre-requisite to create a successful Selenium script. Selenium WebDriver provides advanced techniques to locate elements on web pages. They are as discussed below by one of the selenium test automation services providers:
By is the locating mechanism used in findElement and findElements methods to fetch the respective webElement(s).
Name Locator (By.name(String name))
Every element in the webpage has many attribute and Name being one among them. It is very efficient strategy to locate an element by name.
If we want to use the name as a locator and identify a WebElement the code will look as below
ID Locator (By.id(String id))
ID is the most common and easiest way to locate an element in a webpage. The very idea of ID being unique in a given webpage make it’s much easier to locate that element. An ID can be manually assigned by the web developer or generated by the server dynamically.
If we want to use ID as a locator and identify a WebElement the code will look as below
TagName Locator (By.tagName(String name))
Locating element(s) by TagName is different from above 2 techniques as it can return zero or more elements. Same tag will be present multiple times in a web page so its advisable to use findElements() method when using TagName locator.
If we want to use TagName as a locator and identify a WebElement(s) the code will look as below
LinkText Locator (By.linkText(String linkText))
This locator can only be used to identify HTML links. The HTML Link are represented in a webpage using the tag.
If we want to use LinkText as a locator and identify a WebElement the code will look as below
PartialLinkText Locator (By.partialLinkText(String linkText))
This locator is an extension to LinkText locator mechanism. If we want to use only part of a text to locate a webElement which should be an anchor tag then we can use this technique.
If we want to use PartialLinkText as a locator and identify a WebElement the code will look as below Here we are clicking the HOMESTAYS link in MakeMyTrip application with partial text.
ClassName Locator (By.className(String className))
Almost all elements in a webpage are styled using CSS. These styles are declared directly in the element tag or kept in a CSS file and is referenced using a class attribute.
Now this style can be applied on a WebElement using class attribute
Hyderabad is in Telengana
If we want to use ClassName as a locator and identify a WebElement the code will look as below
XPATH Locator (By.xpath(String xpathExpression))
XPath uses path expressions to select nodes in HTML DOM. The node is selected by following a path or steps. XPath can be used to find the location of any element on a webpage
Selecting Nodes in XPath:
Selects from the root node
Selects elements relative to reference node that match the selection anywhere inside the HTML DOM
Let’s create the XPath syntax for google search box and learn about types of XPath.
1 > Absolute XPath
It starts from the root element within the web page and goes till the target element
2 > Relative XPath
We can reach the target by referencing a element anywhere in the webpage. They are more convenient than absolute path as we dont have to transverse the DOM structure from root to the target element
If we want to use XPath as a locator and identify a WebElement the code will look as below
Various Xpath techniques to handle complex elements
1 > Text()
We can use the Text method to identify the a WebElement with the inner text
2 > Contains()
The contains() function take two string arguments, and returns true if first argument contains second argument
3 > And, OR
In AND expression, two conditions are used and both the conditions should be true to find the element.
//input[@id='hp-widget__sfrom' and @type='text']
The above expression will return 1 matching node in MakeMyTrip applications In OR expression one of the two condition should be true to find the element
//input[@id='hp-widget__sfrom' or @type='text']
The above expression will return 33 matching node in MakeMyTrip applications
4 > Using Starts-With
Start-with function finds the element whose attribute value changes constantly due to any operation on webpage. Here we match the starting text of the attribute to find the element whose attribute changes dynamically.
5 > Parent, Following and Preceding
CSS Locator (By.cssSelector (String selector))
Selectors are patterns that match against elements in a DOM, and is one of several techniques that can be used to select elements in webpage
1 > ID
input[id='hp-widget__sfrom'] (or) #hp-widget__sfrom
2 > Class
input[class=' label_text’] (or) .label_text
3 > Substring Matchers-Starts-With, Ends-With, Contains
'^' symbol, represents the starting text in a string
'$' symbol represents the ending text in a string
'*' symbol represents contains text in a string
What do you think about this post? Is it useful or not? Share this to all testers you know!