Sel 6

3/17/2015
How to Use CSS Selector for Identifying Web Elements for Selenium Scripts Selenium Tutorial #6 Software Testing Help
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
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.
Selector Pattern is constructed using HTML tags, attributes and their values. The central theme behind
http://www.softwaretestinghelp.com/css-selector-selenium-locator-selenium-tutorial-6/
1/13
3/17/2015
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
2/13
3/17/2015
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

3/13
3/17/2015
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
4/13
3/17/2015
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: Sub-string

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
5/13
3/17/2015
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.
6/13
3/17/2015
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.
15
Like
13
Share
11
Tweet
Selenium
Selenium Video Tutorials
Software Testing Class
Recommended reading:
How to Locate Elements in Chrome and IE Browsers for Building Selenium Scripts
Selenium Tutorial #7
How to Identify Web Elements Using Selenium Xpath and Other Locators Selenium
Tutorial #5
Handling Web Tables, Frames, and Dynamic Elements in Selenium Script Selenium
Tutorial #18
How to Use Firebug for Creating Selenium Scripts Selenium Tutorial #4
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
Debugging Selenium Scripts with Logs (Log4j Tutorial) Selenium Tutorial #26
The Best Software Testing Training You'll Ever Get!
7/13
3/17/2015
9 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 doesnt
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.
8/13
3/17/2015
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
Leave a Comment
Name
Mail
Website (Optional)
Submit
Get FREE
eBooks +
Blog
Updates
Enter Email:
9/13
3/17/2015
Best Online Training
Or Subscribe via RSS
Recommended eBook
Learn & Master Software Testing Quickly from Experts Click here to know more.
Adv
10/13
3/17/2015
Latest Articles!
How to Figure Out What QA Job Best Suits You Based on Your Skills?
11 Ways You Know Youre a Tester..
Case Study: How to Eliminate Flaws of Waterfall and Agile Development Processes
Using a Hybrid Model
8 Proven Ways to Manage Stress as a Software Testing Professional
What is Software Testing All About? (Read This 10 Point Summary Carefully)
How to Perform White Box Testing Explained with a Simple Example
How to Plan and Manage Testing Projects Effectively (Tips)
CSS Example
CSS3 Tutorial
Parent Child Class
START HERE!
Home
Get FREE Updates
Testing RESOURCES
QA Testing TRAINING
Premium eBook
11/13
3/17/2015
FREE eBooks
ALL Articles
Contact Us
What Readers Say About Us
Your Feedback!
QA Forum
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
Learn Selenium Automation
Parent Child Class
Web Design Class
Categories
Select Category
Follow Us!
Follow @VijayShinde
Follow
Like
6.3k
Share 47,041 people like

this. Sign Up to see
what your friends
like.
12/13
3/17/2015
Search
About us | Sitemap | Contact us | Find Jobs | Directory | Affiliates | Advertise

All articles are copyrighted and can not be reproduced without permission.
2007 - 2013 Software Testing Help Read our Copyright Policy |
Privacy Policy | Link to Us
13/13

Sel 6

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Sel 6

Uploaded by

Copyright:

Available Formats

3/17/2015

Software Testing Help

How to Use CSS Selector for Identifying Web

Verify the locator value

css=<HTML tag><#><Value of ID attribute>

CSS Selector: Class

CSS Selector: Attribute

CSS Selector: ID/Class and attribute

CSS Selector: Sub-string

expected to start with the specified string.

CSS Selector: Inner text

The Best Software Testing Training You'll Ever Get!

Thank you once again for all these nice tutorials.

Best Online Training

Or Subscribe via RSS

Help & Tutorials

Share 47,041 people like

About us | Sitemap | Contact us | Find Jobs | Directory | Affiliates | Advertise

You might also like