Selenium uses locators to access HTML elements from web pages. These locators have the ability to find and match any elements inside the DOM page. We can use it to perform actions on GUI elements such as radio buttons, buttons, text boxes, links, checkboxes, dropdowns, etc. Sing Locator to generate 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:
- Partial Link Text
- CSS Selectors
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 attributes, and a Name is one among them. It is a 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))
To locate an element in a webpage, we use ID as it is the most common and easiest way. The very idea of ID is unique in a given webpage make it 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 the above two techniques as it can return zero or more elements. The same tag will be present multiple times on a web page, so it's advisable to use findElements() method when using the 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))
We can use this locator only to identify HTML links. The HTML Link is 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 of the LinkText locator mechanism. We can use this technique to use only one piece of text that should be an anchor tag to locate a web element.
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 the 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 we refer to these by using a class attribute.
Now, this style can be applied to a WebElement using the 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. We can use XPath 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
Syntax for XPath:
Let’s create the XPath syntax for the google search box and learn about types of XPath.
1 > Absolute XPath
It starts from the root element within the web page and goes to the target element.
2 > Relative XPath
We can reach the target by referencing an element anywhere on the webpage. These are more convenient than absolute paths as we don't have to transverse the DOM structure from the 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 takes two string arguments and returns true if the first argument contains the second argument.
3 > And, OR
In the AND expression, We use two conditions, and both the conditions should be true to find the element.
//input[@id='hp-widget__sfrom' and @type='text']
The above expression will return one matching node in MakeMyTrip applications. In OR expression, one of the two conditions 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 constantly changes due to any operation on the webpage. Here we match the starting text of the attribute to find the element whose attribute changes dynamically.
5 > Parent, Following and Preceding
- The parent tag will be used to select the parent element of the targeted WebElement
- //input[@id='hp-widget__sfrom' and @type='text']//parent::div
- The following sibling method is used to select a sibling tag following a targeted element
- //input[@id='hp-widget__sfrom' and @type='text']//following-sibling::span
- The preceding sibling method is used to select a sibling tag preceding a targeted element
- //input[@id='hp-widget__sfrom' and @type='text']//preceding-sibling::span
CSS Locator (By.cssSelector (String selector))
Selectors are patterns that match against elements in a DOM and are several techniques that we can use to select elements in a 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 with all the testers you know!