Use CSS Selectors to Locate WebElements with Selenium WebDriver

Published on
5,248 Points
Last Modified:
Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
While using Selenium WebDriver for automated testing of web applications I have found it difficult to learn how to specify locators for WebElements. This article presents example HTML, CSS selectors, and WebDriver Java code to help you write your automated tests more quickly. Use specific CSS selectors to make your tests more reliable when the user interface changes.

You can save the attached HTML file, CssSelectorsTest.html, and Java file, CssSelectorsTest.java, and run the WebDriver test. You'll have to add the Selenium jar, change the code to use the WebDriver of your choice, and change the path to the HTML file.

I'll give you an overview of these CSS selectors.
  1. Basic Selectors
    • Type selector - the name of an HTML element, e.g. h1
    • Class selector - e.g. class="className"
    • ID selector - e.g. id="myId"
    • Attribute selectors - any attribute of an element, e.g. name or value
  2. Combinators
    • Child selectors
    • Descendant selectors
  3. Pseudo-classes
If your HTML element has a unique id,
<a id="create-registerFreePopup" class="button ghost" href="https://www.google.com/?q=create+a+project">Create a Project</a>

Open in new window

this is the simplest way to select it.

Open in new window

When you don't have an id, use CSS selectors like the following. 

Class Selector

.h1Class selects any type of element with class="h1Class".

Child Selector

form > input.textClass selects the input element with attribute class="textClass" which is an immediate child of the form element.

Descendant Combinator

div.divClass input.textClass selects the input element with attribute class="textClass" which is a child/grandchild/great-grandchild/... of the div element with attribute class="divClass".

ID Selector and Class Selector

#checkboxId.checkboxClass selects the element with id="checkboxId" and class="checkboxClass". Use this when you have an ID, but it's not unique.

Attribute Selector

input[name='checkboxName' selects the input element with name="checkboxName".
input[value^='radioThis'] selects the input element which has a name which starts. with "radioThis"

Attribute Selector Starts With

input[value^='radioThis'] selects the input element which has a name which starts. with "radioThis"

Pseudo Classes

input[type='radio']:checked selects the input element with attribute type="radio" which is checked (i.e. selected).

Type Selector

h1 selects the h1 element.

Pseudo Class

input:last-child selects the input element which is the last child of a parent element.

Further Reading


Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Join & Write a Comment

This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month