Selenium-Locators

How to find
Xpath of an
element??
Mithilesh Singh
Locators & xpath

Locators
 identification of the
correct GUI element on a web page is
pre-requisite for creating any
successful automation script. It is
where locators come into the
picture. Locators are one of the
essential components of Selenium
infrastructure, which help Selenium
scripts in uniquely identifying
the WebElements(such as text box,
button, etc.)
 Types of locators:
ID,
Class,
Tag, Link,
Partial Link Text,
CSS, Name,
XPath.

What is DOM?
 The Document Object Model
(DOM) is a programming API
for HTML and XML
documents. It defines the
logical structure of
documents and the way a
document is accessed and
manipulated. ... Nevertheless,
XML presents this data as
documents, and
the DOM may be used to
manage this data.

XPath in
Selenium:
 XPath is a technique in Selenium to navigate
through the HTML structure of a page. XPath enables
testers to navigate through the XML structure of any
document, and this can be used on both HTML and
XML documents.
 1. While Selenium has wrappers for most popular
programming languages, the selector string remains
the same for all of them.
 2. While other locators in Selenium which search for
elements using tags or CSS class names are simpler
to use, they may not be sufficient to select all DOM
elements of an HTML document.
 XPath is defined as XML path. It is a syntax or
language for finding any element on the web page
using the XML path expression.

Syntax of Xpath
 XPath =
//tag_name[@Attribute_name =
“Value of attribute”]
 // --> Select current node.
 tag_name --> Tagname of the
particular node.
 @ --> Select attribute.
 Attribute_name --> Attribute name
of the node.
 Value of attribute --> Value of the
attribute.

Types of XPath
Absolute Xpath
 Absolute XPath is the direct way of
finding the element. Moreover, it
starts from the first/root node of
the XML/HTML document and
goes all the way to the required
node following one node at a
time.
Example:
/html/body/div/header/a/img
Relative Xpath
 Relative XPath starts from any node inside
the HTML DOM; it need not start from
the root node. It beings with a double
forward slash.
Example:
//img[@src= "/images/Testerszone.jpg"]

Relative Xpath Syntax for Pre - defined locators:
 Using text() : //*[text()='testers zone']
 Using name() : //input[@name='Mithilesh']
 Using id() : //input[@id='user-message‘]
 Using class() : //input[@class='user-message']
 LinkText() : //a[@href='http://testerszone.com/']
Note: We can use * in place of input, it will also work fine. Input is specific
tag name but * is generic(point out all the available tags in the DOM) we
can use for any tag name.

Key Points:
We can directly use the pre defined
locators in findElement method instead
of xpath.
driver.findElement(By.id("Testers Zone"));
Note:
We can use other locators like name,
className etc in same way.
You will get to know all available locators using
driver.findElement(By. );

Use of Contains() in Xpath
• Contains() method always use in xpath to get the element using partial text.
• Whenever we have long text or dynamic text we go with contains().
Using text() : //*[contains(text(),'testers ')]
Using name() : //input[contains(@name,'Mith')]
Using id() : //input[contains(@id,'user-message‘)]
Using class() : //input[contains(@class,'user-message')]
Partial-LinkText() : //a[contains(@href,'testerszone.com']

Use of
Starts-with()
 starts-with() method is used when we know
about the initial partial attribute value or
initial partial text associated with the web
element.
Syntax:
//a[starts-with(@id,'link-testers_')]
Note: inside the ' ' you have to mention the
partial text value, make sure you are getting
unique matching element with your xpath.
Simillar way we have ends_with() also. We use
end partial part of text.

Use of
OR & AND

Xpath=//input[@type='submit' and @name='btnLogin']

XPath axes
method
Sometimes we don't get element very easily so we need to use axes method in xpath, we use this to find complex and dynamic
element also.
1. Following:
This will give you the count of total elements in a document of the current node and we can access them using index.
Syntax:
Xpath=//*[@type='text']//following::input

2.Ancestor The ancestor axis selects all ancestors element (parent, grandparent, great-
grandparents, etc.) of the current node.
Syntax:
Xpath=//*[@type='text']//ancestor::div

3. Child
Select all the child elements of the current node.
Xpath= //*[@class='ng-lns-c59-10']//child::tr

4. Preceding
Select all nodes that come before the current
node
Xpath= //*[@type='password']//preceding::input

5. Following-sibling:
The following-sibling selects all sibling nodes after the current node at the same level. i.e. It will find the element
after the current node.
Xpath=//div[@id='nlplmgContainer']//following-
sibling::input

6. Parent
It select the parent of the current node.
Xpath= //*[@type='password']//parent::div

7. Descendant It select below child and grand child node of the curent node.
Note: There is small difference between descendant and following, following gives all the
mathing node in the document and descendant gives elements of current node only.

Introduction- CSS Selector
 CSS stands for Cascading spreadsheets, it is a stylesheet language use to describe
the presentation of the document written in mark up language like HTML
 We use CSS selector as a locator in the selenium
 It is very fast as compare to other locators because it uses certain symbol

There are three important special characters in css selectors:
1. '^' symbol, represents the starting text in a string.
2. '$' symbol represents the ending text in a string.
3. '*' symbol represents contains text in a string.

Partial Value is nothing but partial linked text, In CSS
we use * for this.

Example
 css = input[id$='mail']
 css = input[id*='mai']
 css = input[id^='ema']
 using child selectors--> css = form>label>input[id=PersistentCookie]
 using multiple node --> css = input[name=email][type=text]

Key Points:
Xpath :
 XPath stands for XML Path
 XPath is used to find the element in the HTML
DOM
 The success rate of finding an element using
Xpath is too high
 XPath is used where element has no other way
of locating
 Locate elements in forward and backward
direction.
 Can locate element by text
 Starts with / or //
 More flexible
CSS Selector :
 CSS stands for cascading style sheet
 CSS Selector is used to find the element in the
HTML DOM using style sheet language.
 The success rate of finding an element using
CSS Selector is less compare to Xpath.
 do not support all CSS features.
 Faster in all browsers
 Can not locate by element by text
 Locate elements only in forward direction
 Some CSS selectors will not work all browsers

Selenium-Locators

More Related Content

What's hot (20)

Similar to Selenium-Locators (20)

More from Mithilesh Singh (20)

Recently uploaded (20)

Selenium-Locators