kasperanalytics.
com
+918130877931
All about Selenium
Locators
hr@[Link]
kasper-analytics
[Link]
+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.
hr@[Link]
kasper-analytics
[Link]
+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 [Link]([Link](<element id >)) ID
Attribute
2 By Name [Link]([Link](<element Name
Name>)) Attribute
3 By LinkText [Link]([Link](<linkText >)) Link
Attribute
4 By [Link]([Link](<linkText Partial
PartialLinkTest >)) Link
Attribute
5 By Tag Name [Link]([Link](<element Tag
HTMLTagName >)) Name
Attribute
6 By Class [Link]([Link](<element Class
Name class>)) Name
Attribute
7 By xPath [Link]([Link](<xpath >)) Css
selector
8 By Css [Link]([Link](<css xPath
Selector Selector>)) query
hr@[Link]
kasper-analytics
[Link]
+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.
hr@[Link]
kasper-analytics
[Link]
+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 = [Link]([Link]("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 :
hr@[Link]
kasper-analytics
[Link]
+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.
hr@[Link]
kasper-analytics
[Link]
+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:
hr@[Link]
kasper-analytics
[Link]
+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).
hr@[Link]
kasper-analytics
[Link]
+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.
hr@[Link]
kasper-analytics
[Link]
+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
hr@[Link]
kasper-analytics
[Link]
+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.
hr@[Link]
kasper-analytics
[Link]
+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.).
hr@[Link]
kasper-analytics
[Link]
+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.
hr@[Link]
kasper-analytics
[Link]
+918130877931
Tag and ID :
Tag and Class:
If multiple elements have the same HTML tag and class, then the first one will be
recognized.
hr@[Link]
kasper-analytics
[Link]
+918130877931
Tag and Attribute:
hr@[Link]
kasper-analytics
[Link]
+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']
hr@[Link]
kasper-analytics
[Link]
+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’
hr@[Link]
kasper-analytics
[Link]
+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
hr@[Link]
kasper-analytics
Need any experience/support on
Hands-on Live Project
and Live Frameworks.
Please
Connect
Contact Number – 8130877931
Email – hr@[Link]
LinkedIn – [Link]/company/
kasper-analytics/