Use CSS Selectors to Locate WebElements with Selenium WebDriver

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>

this is the simplest way to select it.

By.id("create-registerFreePopup")

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

• Mozilla Developer Network's CSS Selectors
• CSS Wildcard Selectors by Brendan Connolly