kasperanalytics.

com

+918130877931

All about Selenium

Locators

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

By ID

Locate elements using the 'id' attribute of the HTML element. This is usually unique
and preferred.

By Name

Locate elements using the 'name' attribute. Not always unique, but useful for
forms.

By Link-Text

Locate anchor tags (`<a>`) using the exact link text. Use when you know the full link
text.

By Partial Link Text

Locate anchor tags using a partial match of the link text. Good for dynamic text.

By Tag Name

By Class Name

Locate elements using the class attribute. Use when elements share common
styles.

By XPath – Relative & absolute x path – Most preferrable used

By CSS Selector

Locate elements using CSS selectors (e.g., `.class Name`, `#id`). Preferred for
performance.

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Locators in Selenium

Locators are used in selenium WebDriver to find an element on a DOM. Locating

elements in Selenium WebDriver is performed with the help of findElement() and
findElements() methods provided by WebDriver and WebElement class.

• findElement() returns a WebElement object based on a specified search

criteria or ends up throwing an exception if it does not find any element
matching the search criteria.
• findElements() returns a list of WebElements matching the search criteria. If
no elements are found, it returns an empty list.

There are 8 types of Locators in Selenium are as follows –

Sr. Method Syntax Locate By

Using
1 By ID driver.findElement(By.id(<element id >)) ID
Attribute
2 By Name driver.findElement(By.name(<element Name
Name>)) Attribute
3 By LinkText driver.findElement(By.linkText(<linkText >)) Link
Attribute
4 By driver.findElement(By.partialLinkTest(<linkText Partial
PartialLinkTest >)) Link
Attribute
5 By Tag Name driver.findElement(By.tagName(<element Tag
HTMLTagName >)) Name
Attribute
6 By Class driver.findElement(By.className(<element Class
Name class>)) Name
Attribute
7 By xPath driver.findElement(By.xPath(<xpath >)) Css
selector
8 By Css driver.findElement(By.cssSelector(<css xPath
Selector Selector>)) query

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Example

1. Using id –

Each id is supposed to be unique couldn’t be duplicated. Which makes ids a very

faster and reliable way to locate elements. With id attribute value matching the
location will be returned. If no element has a matching idattribute, a
“NoSuchElementException” will be raised.

All objects on a page are not having id attribute, it’s not realistic. In some cases
developers make it havingnon-unique ids on a page or auto-generate the ids, in
both cases it should be avoided.

2. Using Name –

By using name attribute we can find element on DOM, name attributes are not
unique in a page all time. With the Name attribute value matching the location
will be returned. If no element has a matching nameattribute, a
“NoSuchElementException” will be raised.

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

3. Using Link –

With this you can find elements of “a” tags(Link) with the link names. Use this
when you know link text used within an anchor tag.

Link = “Name of the Link”

WebElement element = driver.findElement(By.linkText("Name of the Link"));

4. Using xPath –

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). XPath is used everywhere where there is XML. Xpath
has a fixed structure (syntax). See below –

Some possible syntax are as follows –

• // tag[@attribute1 = ‘value’ and @attribute2 = ‘value’]

• // tag[@attribute1 = ‘value’ or @attribute2 = ‘value’]

• // tag[@attribute1 = ‘value’, contains(text(),’-xxxxx-’)]

• // tagP[@attribute = ‘value’] // innerTagOfP[@attribute1 = ‘value’ and

@attribute2 = ‘value’]

By using following ways we can select username for above example :

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Xpath = //*[@id=’username’]

Xpath = //input[@id=’username’]

Xpath = //form[@name=’loginForm’]/input[1]

Xpath = //*[@name=’loginForm’]/input[1]

Difference Between Absolute xPath and Relative xPath –

We can use Inner Text for relative xpath –

Use text(),”xxxx”, contains(text(),“xxxx”), starts-with(“xxxx”) to customize the xpath.

// tag [text( ),”xxxx”]

// tag [contains(text( ),”xxxx”)]

// tag [starts-with(@id, “msg”) ]

How to find xpath Dynamic Element ?

Dynamic elements are those elements who changes is attribute on every runtime.
Xpath Axes are used tofind the xpath of the such dynamic elements.

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Xpath Axes –

XPath Axes are the methods used to find dynamic elements. XPath axes search
different nodes in XML document from current context node. XPath expression
select nodes or list of nodes on the basis of attributes likeID , Name, Classname,
etc. from the XML document .

Following:

Selects all elements in the document of the current node( ) in following image,
input box is thecurrent node.

There are 3 "input" nodes matching by using "following" axis- password, login and
reset button.

If you want to focus on any particular element then you can use the below XPath
method:

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Ancestor:

The ancestor axis selects all ancestors element (parent, grandparent,…etc.) of the
current node as shown in the below screen. In the below expression, we are
finding ancestors element of the current node("ENTERPRISE TESTING" node).

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Child:

Selects all children elements of the current node (Java) as shown in the below
screen.

There are 71 "li" nodes matching by using "child" axis. If you want to focus on any
particular element then You can change the xpath according to the requirement
by putting [1],[2] and so on.

Preceding

Select all nodes that come before the current node as shown in the below screen.
In the below expression,

itidentifies all the input elements come before "LOGIN" button that is Userid and
password input element.

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

There are 2 "input" nodes matching by using "preceding" axis. If you want to focus
on any particularelement then You can change the xpath according to the
requirement by putting [1],[2] and so on.

Following sibling

Select the following siblings of the context node. Siblings are at the same level of
the current node as shownin the below screen. It will find the element after the
current Login node . One input nodes matching by using "following-sibling" axis

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Parent: Selects the parent of the current node as shown in the below screen.

There are 65 "div" nodes matching by using "parent" axis. If you want to focus on
any particular element thenYou can change the XPath according to the
requirement by putting [1],[2] and so on.

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Self:

Selects the current node or 'self' means it indicates the node itself as shown in the
below screen. One node matching by using "self " axis. It always finds only one
node as it represents self-element.

Descendant:

Selects the descendants of the current node as shown in the below screen. In the
below expression, it identifies all the element descendants to current element (
'Main body surround' frame element) which means down under the node (child
node , grandchild node, etc.).

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

There are 12 "link" nodes matching by using "descendant" axis. If you want to focus
on any particular elementthen You can change the XPath according to the
requirement by putting [1],[2]. and so on.

Using CSS Selector -

There is a debate on the performance of CSS Locator and XPath locator. Most of
the automation testers believe that using CSS selectors makes the execution of
script faster compared to XPath locator. CSS Selector locator isalways the best
way to locate elements on the page. CSS is always same irrespective of browsers.

CSS selector structure is -

In dynamic elements, there is always a part of locator which is fixed. We need to

generate the locator using this fixed part

If fixed part is at starting use (^) e.g. input [id^=’XXXXXX’] If fixed part is at mid
use (*) e.g. input [id*=’XXXXXX’] If fixed part is at end use ($) e.g. input
[id$=’XXXXXX’]

Following are some of the mainly used formats of CSS Selectors.

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Tag and ID :

Tag and Class:

If multiple elements have the same HTML tag and class, then the first one will be
recognized.

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Tag and Attribute:

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Tag, Class And Attribute:

SUB-STRING MATCHES:

CSS in Selenium has an interesting feature of allowing partial string matches

using ^, $, and *.

Suppose

<input="Employee_ID_001">

Starts with (^): To select the element, we would use ^ which means ‘starts with’

css=input[id^='Em']

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Ends with ($): To select the element, we would use $ which means ‘ends with’.

css=input[id^=’001’]

Contains (*): To select the element, we would use * which means ‘sub-string’

css=input[id*='id']

Also we can use ‘contains()’:

Locating Child Elements(Direct Child):

CSS Locator: div#buttonDiv>button

Explanation: ‘div#buttonDiv>button’ will first go to div element with id ‘buttonDiv’

and then select its child element – ‘button’

[email protected]

kasper-analytics
 kasperanalytics.com

+918130877931

Locating elements inside other elements (child or sub-child):

Syntax: parentLocator>locator1 locator2

CSS Locator: div#buttonDiv button

Explanation: ‘div#buttonDiv button’ will first go to div element with id ‘buttonDiv’

and then select ‘button’ element inside it (which may be its child or sub child)

Locating nth Child:

To find nth-child css.

<li>Selenium</li>

<li>QTP</li>

<li>Sikuli</li>

</ul>

To locate the element with text ‘QTP’, we have to use “nth-of-type”

css="ul#automation li:nth-of-type(2)"

Similarly, To select the last child element, i.e. ‘Sikuli’, we can use

css="ul#automation li:last-child"

END

[email protected]

kasper-analytics
 Need any experience/support on
Hands-on Live Project
and Live Frameworks.

Please
Connect

Contact Number – 8130877931

Email – [email protected]
LinkedIn – www.linkedin.com/company/
kasper-analytics/