Selenium uses locators to find and match the elements on your web page. There are multiple ways to find elements on the web page through locators.
There are 8 locators used in Selenium and they are:
|
No.
|
Locator
|
|
1
|
ID
|
|
2
|
NAME
|
|
3
|
LINKTEXT
|
|
4
|
PARTIAL LINKTEXT
|
|
5
|
TAG NAME
|
|
6
|
CLASS
|
|
7
|
CSSPATH
|
|
8
|
XPATH
|
Now let’s see how the elements are identified in Selenium by using the various locators mentioned in the above table.
- Locating an Element By Id:
Locating an element with ID is the most efficient and preferred way. ID will be unique on a web page which can be found easily.
From the performance point of view the IDs are the fastest and safest locator option available at any given point. E.g. an Employee ID will be unique.
Code Example:
<input class="form-control" id="username" maxlength="50" name="username" placeholder="User Name" type="text" value="">
In the above code the element can be identified by id which is as below
id = “username”
Selenium Script:
The Selenium script to identify the element username will be.
WebElement user_ID = driver.findElement(By.id(“username”));
Many a times the ID’s are generated dynamically on runtime, in that case we need to choose another locator from the above list.
- Locating an Element By Name:
The next worth seeing if the desired element has a name attribute and if there is no id attribute to use. But most of the time name is not unique then selenium will perform or display first matching element for multiple names.
Code Example:
<input class="form-control" name="username" maxlength="50" placeholder="User Name" type="text" value="">
In the above code example the element can be identified by name which is as below
name = “username”
Selenium script:
WebElement name = driver.findElement(By.name(“username”));
- Locating an Element By LinkText:
Locating an element by Link text if there is unique link text on whole web page otherwise selenium will perform action on first matching web element. It is very easy to use and find link to locating an element.
Code Example:
<a href="https://www.tutorialspoint.com" target="_self">Click Here</a>
In the above code the element can be identified by link text which is as below LinkText = Click Here
Selenium Script:
WebElement ClickHere_Link = driver.findElement(By.LinkText(“Click Here”));
- Locating an Element By Partial LinkText:
As name suggested user can provide partial text of the link to locate an element in the same way as Link text.
User can provide partial link text to locate an element.
Code Example:
<a href="https://www.tutorialspoint.com" target="_self">Click Here</a>LinkText = “Click Here”
PartialLinkText = “Click”
Selenium Script:
WebElement Download_Link = driver.findElement(By.PartialLinkText(“Click”));
- Locating an Element By TagName:
Locating an element with Tagname is mostly used with Group elements like, Select and check-boxes / dropdowns.
Code Example:
<Select>
<option value=”USA”> Volvo </option>
<option value=”UK”> Saab < /option>
<option value=”INDIA”> Maruti < /option>
</select>
TagName = “Select”;
Selenium script:
String dropdown = driver.findElement(By.tagName("select")).getText()
Locating an Element By ClassName:
There may be multiple elements with the same class name on the same web page, if we just use findElementByClassName, then make sure it is only one. If not then you need to extend using the class name and its sub elements.
Code Example:
<h1 class="SampleClass"> class </h1>
Selenium Script:
WebElement class_test =driver.findElement(By.className(“SampleClass”));
- Locating an Element By CSS Selector:
CSS is "Cascading Style Sheets" and it’s mainly used to provide style rules for the web pages. We can use for identifying one or more elements in the web page using CSS.
If you start using CSS selectors to identify elements, you will love the speed when compared with XPath. Check this for more details on CSS Selectors examples. We can you use CSS Selectors to make sure scripts run with the same speed in IE browser. CSS selector is always the best possible way to locate complex elements in the page.
Code Example:
<input class="form-control" id="email" maxlength="50" name="username" placeholder="User Name" type="text" value="">CSS = input[id=email]
Selenium Script:
WebElement CheckElements = driver.findElements(By.cssSelector("input[id=’email’]"));
- Locating an Element By XPath:
XPath is defined as XML (Extensible markup language) path. Find a web element by using XPath locator. It’s done by using HTML DOM structure.
Syntax for creating XPath:
XPath = //tagname[@Attribute=’Value’]
There are 2 type of XPath
1. Absolute path
These XPath start with single forward slash (/), which means its start from root node.
Example:
/html/body/table/tr/td/td/h4/b
This XPath is easy to use but if there is any change in path of the element then the whole XPath fails.
2. Relative path
These XPath starts with double forward slash (//), which means you can start from any part from the middle of a HTML DOM structure. It can search the element anywhere from webpage.
//div[@id=‘username’]
Code Example:
In the above image we need to find the XPath for Google logo this we can get directly under fire-path (which is Firefox Add-ons) or we can write from HTML code.
XPath = //div[@id=‘hplogo’]
Selenium Script:
WebElement Google_logo = driver.findElements(By.xpath("//div[@id=‘hplogo’]));
About Author:
Roshni Deshmukh is a consultant in Systems Plus Pvt. Ltd. Within Systems Plus, she actively contributes to the areas of Technology and Information Security. She can be contacted at: roshni.deshmukh@spluspl.com
