Use CSS Selectors to Locate WebElements with Selenium WebDriver
Posted by Superadmin on October 15 2020 15:06:38

Use CSS Selectors to Locate WebElements with Selenium WebDriver

Mark Bullock
 
Published: 2016-10-26
 
Updated: 2019-10-02
Browse All Articles > Use CSS Selectors to Locate WebElements with Selenium WebDriver
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.

 
By.id("create-registerFreePopup")

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