How To Use CSS Selector For Identifying Web Elements For Selenium Scripts - Selenium Tutorial #6

11/29/2016 How to Use CSS Selector for Identifying Web Elements for Selenium Scripts – Selenium Tutorial #6
Software Testing Help
Software Testing Complete Guide
← How to Identify Web Elements Using Selenium
Xpath and Other Locators – Selenium Tutorial #5 Search
How to Locate Elements in Chrome and IE Browsers for Building Selenium Scripts – Selenium Tutorial
#7 →
How to Use CSS Selector for Identifying Web
Elements for Selenium Scripts – Selenium
Tutorial #6
Posted In | Automation Testing, Selenium Tutorials | Last Updated: "August 25, 2016"
In our previous Selenium tutorial we learned
different types of locators. We also learned how to
use: ID, ClassName, Name, Link Text, and Xpath
locators for identifying web elements in a web
page.
In continuation with that, today we will learn how
to use CSS Selector as a Locator. This is our 6th
tutorial in our free Selenium Training series.
Using CSS Selector as a Locator:
CSS Selector is combination of an element selector
and a selector value which identifies the web
element within a web page. The composite of
element selector and selector value is known as
Selector Pattern.
http://www.softwaretestinghelp.com/cssselectorseleniumlocatorseleniumtutorial6/ 1/16
Selector Pattern is constructed using HTML tags, attributes and their values. The central theme behind
the procedure to create CSS Selector and Xpath are very much similar underlying the only difference in
their construction protocol.
Like Xpath, CSS selector can also locate web elements having no ID, class or Name.
So now gearing ahead, let us discuss the primitive types of CSS Selectors:
CSS Selector: ID
In this sample, we would access “Email” text box present in the login form at Gmail.com.
The Email textbox has an ID attribute whose value is defined as “Email”. Thus ID attribute and its value
can be used to create CSS Selector to access the email textbox.
Creating CSS Selector for web element
Step 1: Locate / inspect the web element (“Email” textbox in our case) and notice that the html tag is
“input” and value of ID attribute is “Email” and both of them collectively make a reference to the “Email
Text box”. Hence the above data would be used to create CSS Selector.
Verify the locator value
Step 1: Type “css=input#Email” i.e. the locator value in the target box in the Selenium IDE and click on
the Find button. Notice that the Email Text box would be highlighted.
Syntax
css=<HTML tag><#><Value of ID attribute>
HTML tag – It is tag which is used to denote the web element which we want to access.
# – The hash sign is used to symbolize ID attribute. It is mandatory to use hash sign if ID attribute
is being used to create CSS Selector.
Value of ID attribute – It is the value of an ID attribute which is being accessed.
The value of ID is always preceded by a hash sign.
Note: Also applicable for other types of CSS Selectors
While specifying CSS Selector in the target text box of Selenium IDE, always remember to prefix
it with “css=”.
The sequence of the above artifacts is inalterable.
If two or more web elements have the same HTML tag and attribute value, the first element
marked in the page source will be identified.
CSS Selector: Class
In this sample, we would access “Stay signed in” check box present below the login form at gmail.com.
The “Stay signed in” check box has a Class attribute whose value is defined as “remember”. Thus Class
attribute and its value can be used to create CSS Selector to access the designated web element.
Locating an element using Class as a CSS Selector is very much similar to using ID, the lone difference
lies in their syntax formation.
Step 1: Locate / inspect the web element (“Stay signed in” check box in our case) and notice that the
html tag is “label” and value of ID attribute is “remember” and both of them collectively make a
reference to the “Stay signed in check box”.
Step 1: Type “css=label.remember” i.e. the locator value in the target box in the Selenium IDE and click
on the Find Button. Notice that the “Stay signed in” check box would be highlighted.
Syntax
css=<HTML tag><.><Value of Class attribute>
. – The dot sign is used to symbolize Class attribute. It is mandatory to use dot sign if Class
attribute is being used to create CSS Selector.
The value of Class is always preceded by a dot sign.
CSS Selector: Attribute
In this sample, we would access “Sign in” button present below the login form at gmail.com.
The “Sign in” button has a type attribute whose value is defined as “submit”. Thus type attribute and its
value can be used to create CSS Selector to access the designated web element.

Step 1: Locate / inspect the web element (“Sign in” button in our case) and notice that the html tag is
“input”, attribute is type and value of type attribute is “submit” and all of them together make a reference
to the “Sign in” button.
Step 1: Type “css=input[type=’submit’]” i.e. the locator value in the target box in the Selenium IDE and
click on the Find Button. Notice that the “Sign in” button would be highlighted.
Syntax
css=<HTML tag><[attribute=Value of attribute]>
Attribute – It is the attribute we want to use to create CSS Selector. It can value, type, name etc. It
is recommended to choose an attribute whose value uniquely identifies the web element.
Value of attribute – It is the value of an attribute which is being accessed.
CSS Selector: ID/Class and attribute
In this sample, we would access “Password” text box present in the login form at gmail.com.
The “Password” text box has an ID attribute whose value is defined as “Passwd”, type attribute whose
value is defined as “password”. Thus ID attribute, type attribute and their values can be used to create
CSS Selector to access the designated web element.
Step 1: Locate / inspect the web element (“Password” text box in our case) and notice that the html tag is
“input”, attributes are ID and type and their corresponding values are ”Passwd” and “password” and all
of them together make a reference to the “Password” textbox.
Step 1: Type “css=input#Passwd[name=’Passwd’]” i.e. the locator value in the target box in the
Selenium IDE and click on the Find Button. Notice that the “Password” text box would be highlighted.
Syntax
css=<HTML tag><. Or #><value of Class or ID attribute><[attribute=Value of attribute]>
Two or more attributes can also be furnished in the syntax. For example,
“css=input#Passwd[type=’password’][name=’Passwd’]”.
CSS Selector: Substring
CSS in Selenium allows matching a partial string and thus deriving a very interesting feature to create
CSS Selectors using sub strings. There are three ways in which CSS Selectors can be created based on
mechanism used to match the sub string.
Types of mechanisms
All the underneath mechanisms have symbolic significance.
Match a prefix
Match a suffix
Match a sub string
Let us discuss them in detail.
Match a prefix
It is used to correspond to the string with the help of a matching prefix.
Syntax
css=<HTML tag><[attribute^=prefix of the string]>
^ – Symbolic notation to match a string using prefix.
Prefix – It is the string based on which match operation is performed. The likely string is expected
to start with the specified string.
For Example: Let us consider “Password textbox”, so the corresponding CSS Selector would be:
css=input#Passwd[name^=’Pass’]
Match a suffix
It is used to correspond to the string with the help of a matching suffix.
Syntax
css=<HTML tag><[attribute$=suffix of the string]>
# – Symbolic notation to match a string using suffix.
Suffix – It is the string based on which match operation is performed. The likely string is expected
to ends with the specified string.
For Example: Lets again consider “Password textbox”, so the corresponding CSS Selector would be:
css=input#Passwd[name$=’wd’]
Match a sub string
It is used to correspond to the string with the help of a matching sub string.
Syntax
css=<HTML tag><[attribute*=sub string]>
* – Symbolic notation to match a string using sub string.
Sub string – It is the string based on which match operation is performed. The likely string is
expected to have the specified string pattern.
For Example: Lets again consider “Password textbox”, so the corresponding CSS Selector would be:
css=input#Passwd[name$=’wd’]
CSS Selector: Inner text
Inner text helps us identify and create CSS Selector using a string pattern that the HTML Tag manifests
on the web page.
Consider, “Need help?” hyperlink present below the login form at gmail.com.
The anchor tag representing the hyperlink has a text enclosed within. Thus this text can be used to create
CSS Selector to access the designated web element.
Syntax
css=<HTML tag><:><contains><(text)>
: – The dot sign is used to symbolize contains method
Contains – It is the value of a Class attribute which is being accessed.
Text – The text that is displayed anywhere on the web page irrespective of its location.
This is one of the most frequently used strategies to locate web element because of its simplified syntax.
Owing to the fact that creating CSS Selector and Xpath requires a lot of efforts and practice, thus the
process is only exercised by more sophisticated and trained users.
Next Tutorial #7: Proceeding ahead with our next tutorial, we would take the opportunity to introduce
you with an extension of locating strategies. Thus, in the next tutorial, we would study the mechanism to
locate web elements on Google Chrome and Internet Explorer.
We are covering Selenium Locators in more details as it is important part of Selenium Script creation.
Let us know your queries/comments below.
a Share 18 d Tweet f +1 11 h Pin k Share 13

Recommended Reading Only For You:
How to Use Firebug for Creating Selenium Scripts – Selenium Tutorial #4
How to Identify Web Elements Using Selenium Xpath and Other Locators – Selenium Tutorial
#5
How to Locate Elements in Chrome and IE Browsers for Building Selenium Scripts – Selenium
Tutorial #7
Introduction to Selenium WebDriver – Selenium Tutorial #8
Usage of Selenium Select Class for Handling Dropdown Elements on a Web Page – Selenium
Tutorial #13
Check Visibility of Web Elements Using Various Types WebDriver Commands – Selenium
Tutorial #14
Learn How to Use TestNG Annotations in Selenium (with Examples)
Never Miss Another Post
Enter your email:
Yes, Start Sending New Posts
23 comments ↓
#1 Zoltan
Good one. it will be nice to provide tips on moving xpath locators to css as well.
#2 Shilpa Kamble
when should we use CSS selector method? any guidelines for using locators?
#3 Shruti Shrivastava
@Zoltan
Thank you for your kind words.
You can find the information related to Xpaths in the previous tutorial.
#4 Shruti Shrivastava
@Shilpa
Thats a nice question.
There is obviously a preference order in which we tempt to use these elements
– IDs are considered to be the most reliable locator type as they are unique but they doesn’t work
well if the ids are dynamic.
– Links are also reliable but can only be used with anchor tags.
– Xpaths are reliable and can easily locate elements but they tend to be slower than other locator
types.
– CSS Selectors are faster than Xpaths but are complex to create.
Thus, people widely uses Xpaths and cssSelector because of their flexibility..
#5 Subrata Paul
Hi Shruti,
Great job!!! I am enjoying it a lot. Would you go into the complex concepts of Selenium so that we
can become proficient in working with selenium at workplaces?
Syntax before ‘CSS Selector: Inner text’ needs to be corrected. It is the same as ‘Match the suffix’.
Thank you once again for all these nice tutorials.
#6 priya
Thanks a lot !
#7 Sangeetha
Awesome!! Thanks for the detailed information. Its very helpful!!
#8 Samira
Please provide the example of CSS Selector: Inner text
#9 Ashwini
Hi,
the section : Syntax
css=
# – Symbolic notation to match a string using suffix ”
has to be corrected.
Confused with $ and # for match a suffix notation.
Thanks in advance
Regards,
Ashwini
#10 Yulin
Syntax for matching inner text should be :
css=:contains(text)
#11 Swetha
Hi,
The content :Example for match sub string
In the syntax “* ” used but when come to example it is explained with “#”.
#12 writer
The Google sign in GUI has changed so much this tutorial was written. The URLs for the
Password page is very long and when I copy/paste it into Selenium IDE Base URL textbox and try
to find the css=input#Passwd[name=’Passwd’] element, I get the following error in the log:
[error] locator not found: css=input#Passwd[name=’Passwd’]
Anyone else experiencing this?
#13 Gaurav Khurana
Best thing about your tutorial is you are covering end to end every topic. like you told all options
inside Selenium IDE. Now shared details on all types of CSS locators
#14 Gaurav Khurana
Yes, you are right ‘Writer’. Google page is changed, I have used yahoo for testing this tutorial tips.
Logic remains the same however
#15 nilesh
Thank you
#16 prakash
Thanks shruti,
Is there anyway through which we can handle any kind of locator through a single statement or can
some kind of mapping so that whenever i pass any locator it will automatically recognize whether
it is an id /classname/xpath.
Thanks
#17 Ebi
can someone explain “contains” with an example code in selenium??
#18 Pratap Chandel
Is there any .jar file for 64bit operating system, for launching Chrome browser in selenium ?
or Same file which is used in 32bit operating system can used ?
#19 krutika ramani
I want to test our website with 2030 email ids.How do I do the same on selenium IDE(in firefox).
those this IDE gives facilities.to extract “username” and password from “excel sheet”
please help me.
#20 Technosnoop
Why to use css selector method over xpath? any advantages which one is better?
#21 PAVAN
HOW TO GET THE CSS COMPONENT FOR SHARE BUTTON ON FACEBOOK
#22 rahul shinde
how to select id,css,link for any submenu
#23 Mayuri Mittal
Hi,
I have added a target with a value with CSS locator for site youtube.com but when i am trying to
play whole test case suite it is throwing an error in logs.
Target
css=input#mastheadsearchterm
Value
Mache Mayuri
It is throwing an error [error] Unknown command: ”
Leave a Comment
Name
Mail
Website (Optional)
Submit
START HERE!
Home
Get FREE Updates
Testing RESOURCES
QA Testing TRAINING
Premium eBook
FREE eBooks
ALL Articles
Contact Us
What Readers Say About Us
Your Feedback!
Help & Tutorials
ISTQB Study Guide
ISTQB Premium Study Guide
Free QA Training
Free Selenium Training
Free QTP Training
Free QC Training
HP LoadRunner Tutorials
JIRA Tutorials
101+ Interview Questions
Follow Us!
Adv
Categories
Agile Testing
Automation Testing
Basics of Software testing
Bug Defect tracking
Career in Software Testing
Cookie Testing
Crowdsourced Testing
Database Testing
Game Testing
General
GUI Testing
How to be a good tester
HP Quality Center
Installation Testing
Interviews
ISO standards
ISTQB Certification
LoadRunner Tutorials
Manual Testing
Mobile Testing
Performance Testing
QA certifications
QA forum
QA leadership
QA team skills
QA Test engineers Payscale
QTP Tutorials
Quality assurance
Questions & answers
Reviews
Security testing
Selenium Tutorials
Soft skills for testers
Software Job Openings
Software Testing Books
Software Testing Events
software testing links
Software Testing Resume
Software Testing Templates
Software Testing Tools
Software Testing Training
Test Management Tools
Test Plan Template
Test strategy
Tester vs Developer
Testing best practices
Testing Concepts
Testing Interview questions
Testing Life cycle
Testing Methodologies
Testing News
Testing Skill Improvement
Testing Tips and resources
Testing Web Services
Types of testing
Web Testing
Winrunner
Write For Us
Search
About us | Articles | Contact us | Directory | Affiliates | Advertise | Testing Services
Download Free eBook + Get Blog
All articles are copyrighted and can not be reproduced without permission.
Updates
Your Email:
© 2006 2015 Software Testing Help — Read our Copyright Policy |
Privacy Policy | Link to Us
Latest Articles!
3 Worst Defect Reporting Habits and How to Break Them
The Complete Beginner’s Guide to Responsive Web Design Testing
10 Worst Things a Critic Would Say About Your Software
TestLodge Tutorial – How to Organize Your Software Testing Projects Using TestLodge
Test Management Tool
How Do You Decide Which Defects are Acceptable for the Software to Golive?
9 Ways to Quickly Improve Your Writing Skills as a Software Tester
Appium Tutorial – How to Perform Automation Testing of Android Apps on an iOS System
Best Online Training

How To Use CSS Selector For Identifying Web Elements For Selenium Scripts - Selenium Tutorial #6

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

How To Use CSS Selector For Identifying Web Elements For Selenium Scripts - Selenium Tutorial #6

Hochgeladen von

Copyright:

Verfügbare Formate

11/29/2016 How to Use CSS Selector for Identifying Web Elements for Selenium Scripts – Selenium Tutorial #6

a Share 18 d Tweet f +1 11 h Pin k Share 13

Das könnte Ihnen auch gefallen