Scribd
Upload
431 views14 pages

Locators, X Path and CSS Notes PDF

The document discusses different types of locators that can be used to identify elements on a web page in Selenium, including id, name, link text, partial link text, tag name, class name, CSS, and XPath. It provides examples of using each locator type on sample HTML code from Facebook, SeleniumHQ, and other sites. The document also covers additional locator strategies like using child, parent, preceding sibling and following sibling relationships.

Uploaded by

kirun15
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
431 views14 pages

Locators, X Path and CSS Notes PDF

The document discusses different types of locators that can be used to identify elements on a web page in Selenium, including id, name, link text, partial link text, tag name, class name, CSS, and XPath. It provides examples of using each locator type on sample HTML code from Facebook, SeleniumHQ, and other sites. The document also covers additional locator strategies like using child, parent, preceding sibling and following sibling relationships.

Uploaded by

kirun15
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

Author, Bhanu Pratap Singh

https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

What is Locator?

The locator can be termed as an address that identifies a web element uniquely within the
webpage. Locators are the HTML properties of a web element which tells the Selenium
about the web element it needs to perform the action on.

Selenium webdriver uses 8 locators to find the elements on web page. The following are the
list of object identifier or locators supported by selenium.

We have prioritized the list of locators to be used when scripting.

id Select element with the specified @id attribute.

Name Select first element with the specified @name attribute.

Linktext Select link (anchor tag) element which contains text matching the specified link text

Partial Linktext Select link (anchor tag) element which contains text matching the specified
partial link text

Tag Name Locate Element using a Tag Name .

Class name Locate Element using a class Name ..

Css Select the element using css selectors.


Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

Xpath Locate an element using an XPath expression.

X Path
Syntax
// TagName[@Attribute Name=’attribute Value’]

Types of X Path

1. Native Xpath, it is like directing the xpath to go in direct way. like


Example:
html/head/body/table/tr/td

2. Relative Xpath.
In relative xpath we will provide 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:
//table/tr/td

For CSS
Attribute Symbol Used
User ID use # symbol
Using Class Name Use . symbol
Using attribute tagname[attribute='value']
Using Multiplr attribute tagname[attribute1='value1'][attribute2='value2']
Contains *symbol
Starts with ^ symbol
Ends with $ sybmol

Application URL:

https://www.facebook.com/?
HTML
Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

<input type="email" class="inputtext" name="email" id="email" value="" tabindex="1"


data-testid="royal_email">

X Path
//input[@id='email']
//input[@class='inputtext' and @id='email']
//input[@name='email']
//input[@data-testid='royal_email']

CSS:
#email
input[id='email']
input[class='inputtext'][id='email']
input[name='email']
input[data-testid='royal_email']

HTML

<input type="password" class="inputtext" name="pass" id="pass" tabindex="2" data-


testid="royal_pass">
X Path
//input[@type='password' and @name='pass']
//input[@id='pass']
//input[@data-testid='royal_pass']
//input[@data-testid='royal_pass' and @id='pass' and @name='pass']

CSS
input[type='password'][name='pass']
#pass
input[data-testid='royal_pass']
input[data-testid='royal_pass'][id='pass'][name='pass']

HTML
<div class="_ihd _3ma mbs _6n _6s _6v">Create a new account</div>

X Path
//div[text()='Create a new account']

HTML

<input type="text" class="inputtext _58mg _5dba _2ph-" data-type="text"


name="reg_email__" aria-required="1" placeholder="" aria-label="Mobile number or
email address" id="u_0_q" role="button">
Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

X Path:
//input[@name='reg_email__']
//input[@aria-label='Mobile number or email address']

CSS:
input[name='reg_email__']
input[aria-label='Mobile number or email address']
input[class^='inputtext'][name='reg_email__']
input[aria-label$='or email address']

HTML

X Path
//span[@data-name='gender_wrapper']/span[1]/label
//label[contains(text(),'Female')]

CSS
span[data-name='gender_wrapper']>:nth-child(1)>:nth-child(2)

HTML:

<a class="_58ms mlm _5f0v" id="birthday-help" href="#" title="Click for more


information" role="button" aria-describedby="js_uh" tabindex="0">Why do I need to
provide my date of birth?</a>

X Path
//a[@title='Click for more information']
//a[@id='birthday-help']
//a[contains(text(),'Why do I need to provide my date of birth?')]

CSS:
a[title='Click for more information']
#birthday-help
Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

Application URL:

https://www.seleniumhq.org/download/

HTML

Download
X Path
//a[@href='/download/' and @title='Get Selenium']
//a[@title='Get Selenium']
//li[@id='menu_download']/a

CSS
a[href='/download/'][title='Get Selenium']
a[title='Get Selenium']
li[id='menu_download']>a
#menu_download>a

HTML
Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

Documentation

X Path
//a[@href='/docs/' and @title='Technical references and guides']
//a[@title='Technical references and guides']
//li[@id='menu_documentation']/a

CSS
a[href='/docs/'][title='Technical references and guides']
a[title='Technical references and guides']
li[id='menu_documentation']>a
#menu_documentation>a

How to get all common li


HTML
Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

X Path
//div[@id='header']/ul/li

CSS
div[id='header']>ul>li

HTML

Donate to Selenium
X Path
//h3[contains(text(),'Donate to Selenium')]
//div[@class='ads']/h3[contains(text(),'Donate to Selenium')]
//div[@id='mBody']/div/div[1]/h3[1]
//h3[text()='Donate to Selenium']
Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

CSS
.ads>:nth-child(1)
#mBody>:nth-child(1)>:nth-child(2)>:nth-child(1)

Application URL:

https://www.actitime.com/download

HTML:

How to get all li through reference of Parent Node

X Path:
//div[@class='header__container']/nav/ul/li[1]
//div[@class='header__container']/nav/ul/li[2]
//div[@class='header__container']/nav/ul/li[3]
//div[@class='header__container']/nav/ul/li[4]

CSS:
.header__container>nav>ul>:nth-child(1)
.header__container>nav>ul>:nth-child(2)
.header__container>nav>ul>:nth-child(3)
.header__container>nav>ul>:nth-child(4)

HTML:
Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

Following-Sibling, Preceding-sibling, Child, Parent Concepts in Selenium

Child Example:

X path

To Locate nav in HTML

//div[@class='header__container']/child::nav

To Locate ul in HTML

//div[@class='header__container']/child::nav/child::ul

To Locate third li in HTML

//div[@class='header__container']/child::nav/child::ul/child::li[3]
Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

Following sibling example

To Locate Features

//a[contains(text(),'Features')]

To Locate Purchase with Reference of Features

//a[contains(text(),'Features')]/parent::*/following-sibling::li[1]/a

To Locate Clients with Reference of Features

//a[contains(text(),'Features')]/parent::*/following-sibling::li[2]/a

Preceding sibling example

To Locate Clients

//a[contains(text(),'Clients')]

To Locate Features with Reference of Clients

//a[contains(text(),'Clients')]/parent::*/preceding-sibling::li[2]/a

To Locate Purchase with Reference of Clients

//a[contains(text(),'Clients')]/parent::*/preceding-sibling::li[1]/a

Application:

https://book.spicejet.com/Register.aspx
Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

CSS
start-with
select[name^='CONTROLGROUPREGISTERVIEW$PersonInput']
select[name^='CONTROLGROUPREGISTERVIEW$PersonInput']

ends-with
select[name$='PersonInputRegisterView$DropDownListTitle']
select[name$='PersonInputRegisterView$DropDownListTitle']

X Path
//select[starts-with(@id,'CONTROLGROUPREGISTERVIEW')]

Application:

https://www.tirerack.com/content/tirerack/desktop/en/homepage.html

Elements X Path
Tires //*[@id='pageLinks']/ul/li[1]/div/div/a
Wheels //*[@id='pageLinks']/ul/li[2]/div/div/a
Parts & Accessories //*[@id='pageLinks']/ul/li[3]/div/div
Research & Advice //*[@id='pageLinks']/ul/li[4]/div/div/a
Delivery & Installatio
n //*[@id='pageLinks']/ul/li[5]/div/div/a
//*[@id='header']/div/div[1]/div/div[2]/ul/
Why Tire Rack? div/li[1]/a
//*[@id='header']/div/div[1]/div/div[2]/ul/
Order Tracking div/li[2]/a
Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

//*[@id='header']/div/div[1]/div/div[2]/ul/
Customer Support div/li[3]/a
phoneNumber //*[@id='phoneNumber']
Log In / Create Accou //*[@id='header']/div/div[1]/div/div[2]/ul/l
nt i[1]/div/div[2]/div
//*[@id='shopByVehicle-search-
Select Make change']/div[1]/div[1]/button
//*[@id='shopByVehicle-search-
Select Year change']/div[1]/div[2]/button
//*[@id='shopByVehicle-search-
Select Model change']/div[1]/div[3]/button
//*[@id='shopByVehicle-search-
zipCheck change']/div[4]/input
Choose Your Product //*[@id='shopByVehicle-search-
Category change']/div[7]/div/div/button

Elements CSS
Tires #pageLinks>ul>:nth-child(1)>div>div>a
Wheels #pageLinks>ul>:nth-child(2)>div>div>a
Parts & Accessories #pageLinks>ul>:nth-child(3)>div>div>a
Research & Advice #pageLinks>ul>:nth-child(4)>div>div>a
Delivery & Installation #pageLinks>ul>:nth-child(5)>div>div>a

Why Tire Rack? .utilitynav.utility-nav>:nth-child(1)>a

Order Tracking .utilitynav.utility-nav>:nth-child(2)>a

Customer Support .utilitynav.utility-nav>:nth-child(3)>a


phoneNumber #phoneNumber

Log In / Create Account .log


Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

.select4Set.clearafter>:nth-
Select Make child(1)>button>div
.select4Set.clearafter>:nth-
Select Year child(2)>button>div
.select4Set.clearafter>:nth-
Select Model child(3)>button>div

zipCheck .zip-code.zip-code-input

Choose Your Product Category .row.oneField>div>div

Application
https://www.facebook.com/?
CSS

Facebook
First Name input[name='firstname']
input[class^="inputtext"][name="firstname"]

Surname input[name='lastname']
Mobile Numer or Email [aria-label="Mobile number or email address"]
Address
Re-enter Mobile [type="text"][aria-label="Re-enter mobile number or email
Number address"]
New Password [type="password"][aria-label="New password"]
Day #day
[title="Day"][name="birthday_day"][aria-label="Day"]

Month [title="Day"][name="birthday_day"][aria-label="Day"]+select
Year [title="Day"][name="birthday_day"][aria-
label="Day"]+select+select
Why doo I need to [title$="more information"]
provide my DOB
Female span[data-name="gender_wrapper"]>:nth-child(1)>:nth-
child(2)
Male span[data-name="gender_wrapper"]>:nth-child(2)>:nth-
child(2)
Author, Bhanu Pratap Singh
https://www.facebook.com/learnbybhanupratap/
https://www.udemy.com/seleniumbybhanu
YouTube Channel: learnbybhanu

Female span[data-name="gender_wrapper"]>:first-child
Male span[data-name="gender_wrapper"]>:last-child

You might also like