Selenium WebDriver uses 8 locators to find the elements on web page. The following are the
list of locators supported by selenium.
I’ve
listed all locators to be used when scripting.
Locator
|
Description
|
Usage
|
Id
|
Select
the Element using @id attribute
|
By.id(<id
of the tag>)
|
Name
|
Select first Element
with the specified @name attribute
|
By.name(<name of
the tag>)
|
ClassName
|
Select
first element with the specified @class attribute
|
By.className(<class
of the tag>)
|
LinkText
|
Select anchor tag
which matches the text specified
|
By.linkText(“<text
of the link”);
|
partialLinkText
|
Select
anchor tag which contains the text specified
|
By. partialLinkText
(“<text of the link”);
|
tagName
|
Select the first
element with the specified tag
|
By.tagName(<tag
name>)
|
cssSelector
|
Select
the element using the CssSelector Provided
|
By.cssSelector(“cssSelector”)
|
xPath
|
Select the element
using the xpath expression
|
By.xPath(“xpath of the
element”)
|
Locating
an Element by ID:
The
most efficient way and preferred way to locate an element on a web page is by
ID. ID will be the unique on web page which can be easily identified.
IDs
are the safest and fastest locator option and should always be the first choice
even when there are multiple choices, it is like an unique identification number.
Examples:
- <div id="mainMenu">menu items</div>
- <input id="email" class="emailAddress" type="text"/>
How?
- WebElement Ele = driver.findElement(By.id("mainMenu "));
Unfortunately,
there are many cases where an element does not have a unique id (meaninge ids
are being dynamically generated). In these cases, we need to choose an
alternative locator strategy, however if possible we should ask development
team of the web application to add few ids to a page specifically for automating
the application.
Locating
an Element by Name:
When
there is no Id to use, the next worth seeing if the desired element has a name
attribute. But make sure there the name cannot be unique all the times. If
there are multiple names, Selenium will always perform action on the first
matching element
Examples:
- <input name="login" class="loginClass" type="submit"/>
- <label name="login">
How?
- WebElement loginButton= driver.findElement(By.name("login"));
As
I said, from the above example if you observe both label and input tags are
having the same value for ‘Name’ attribute. If you try to find the element
using name locator, input tag will be considered as it is the first tag which
matches the specified name
Locating
an Element by LinkText:
Finding
an element with link text is very simple. But make sure, there is only one
unique link on the web page. If there are multiple links with the same link
text (such as repeated header and footer menu links), in such cases Selenium
will perform action on the first matching element with link.
Examples:
- <a href="/html/default.asp">Learn HTML</a>
How?
- WebElement linkHtml = driver.findElement(By.linkText("Learn HTML "));
Locating
an Element by Partial LinkText:
In
the same way as LinkText, PartialLinkText also works in the same pattern, but
the only difference here is you not required provide exact name of the link.
Examples:
- <a href="/html/default.asp">Learn HTML</a>
- <a href="/css/default.asp">Learn CSS</a>
How?
- WebElement download = driver.findElement(By.PartialLinkText("Learn"));
Locating
an Element by TagName:
TagName
can be used with Group elements like, Select and check-boxes / dropdowns.
Examples:
<select name=’Weekends’>
<option>Saturday</option>
<option>Sunday</option>
</select>
How?
- WebElement selectTag = driver.findElement(By.tagName("select"));
Locating
an Element by Class Name:
There
may be multiple elements with the same name, if we just use
findElementByClassName,m make sure it is only one. If not the you need to
extend using the classname and its sub elements.
Example:
- <input name="login" class="loginClass" type="submit"/>
How?
- WebElement loginClass =driver.findElement(By.className(“loginClass”));
Locating
an Element by CSS Selector:
CSS
mainly used to provide style rules for the web pages and we can use for
identifying one or more elements in the web page using css.
cssSelector
is faster than xpath expression. 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.
Important
point in cssSelector:
- Immediate child is defined as > Ex: div>input
- Child of child is defined as white space Ex: div input
- Id will be represented as # Ex: input#loginTest
- Class will be represented as dot(.) Ex: input.loginClass
- Next sibling will be represented as +
- Attribute Values will be represented as input[name=’sample’]
- String matchers
- Equals: input[id=’user_name’]
- Starts with: Input[id^=’user_’]
- Ends with: Input[id$=’_name’]
- Sub string: input[id*=’ser_na’]
- Inner Text will be represented as input.contains(‘mailAddre’)
How?:
- WebElement emailAddress = driver.findElements(By.cssSelector("input[id=’email']"));
Locating
an Element by XPath:
XPath
is designed to allow the navigation of XML documents, with the purpose of
selecting individual elements, attributes, or some other part of an XML
document for specific processing
There
are two types of xpath
- Native Xpath, it will start from the root tag normally it is html
- Here the advantage of specifying native path is, finding an element is very easy as we are mention the direct path. But if there is any change in the path (if something has been added/removed) then that xpath will break.
- Relative Xpath, it we will be the relative path, it is like we will tell the xpath to find an element by telling the path in between.
- Advantage here is, if at all there is any change in the html that works fine, until unless that particular path has changed. Finding address will be quite difficult as it need to check each and every node to find that path.
Example:
<html>
<head>
<title>…</title>
</head>
<body>
<div>
<input>…</input>
<span>…</span>
</div>
</body>
</html>
How?
- Native xpath = html/body/div/input
- Relative xpath = //div/input
Other
Example:
- Image: //img[@alt='image alt text goes here']
- Table: //table[@id='table12']/td[4]
- Anchor Tag: //a[contains(@href,'href goes here')]
- Input: /input[@name='name2' and @value='yes']
