CSS Locators in Selenium Tutorial

In this tutorial, we will learn about CSS Selector and create CSS selectors manually using different HTML attributes of the web elements. For fetching the HTML information of the web elements we will use firebug or developer tool.

CSS and CSS Selectors Introduction

CSS stands for Cascading Style Sheets, these are used for styling the different elements of an HTML webpage. In the .css files we can locate specific elements of a webpage(.html files) and then style them like - set their font size, width, height etc.
For locating the web elements to be styled, we use certain rules provided as CSS Selectors.
For example, the following statement first locates a web element satisfying the selector pattern - "div#searchBox" and then aligns the text inside it to center.

div#searchBox {text-align: center;}

In Selenium, we can use these CSS Selector rules/patterns for locating web elements and later perform different operations on them. For example-

//Locating searchBox element using CSS Selector
WebElement searchBox = driver.findElement(By.cssSelector("div#searchBox"));
//Performing click operation on the element
searchBox.sendKeys("QA Earth");

Let's now see the different rules of CSS Selectors along with their syntax and usage example.

CSS Selectors

Below is the syntax and examples on how to locate the desired elements and use them in selenium scripts.

Using Id

CSS Selector Rule - #id

Example -
For the Sample HTML below-

<button id="submitButton1" type="button" class="btn">Submit</button>

CSS Locator - #submitButton1
Description - '#submitButton1' will select the element with id 'submitButton1'.

Using class

CSS Selector Rule - .class

Example -
For the Sample HTML below-

<button id="submitButton1" type="button" class="btn">Submit</button>

CSS Locator - .btn

Description - '.btn' will select all the elements with class 'btn'.

Using tag

CSS Selector Rule - tagName

Example -
For the Sample HTML below-

<input id="fname" type="text" name="firstName" class="textbox">

CSS Locator - input
Description - 'input' will select all the input type elements.

Using attributes and their value

CSS Selector Rule - [attributeName='attributeValue']

Example -
For the Sample HTML below-

<input id="fname" type="text" name="firstName" class="textbox">

CSS Locator - [name='firstName']
Description - [name='firstName'] will select the elements with name attribute having value 'firstName'.

Now, using these basic rule of locating web elements, we can use them in conjunction to create more robust locators, selecting unique elements.

Using tags and id

CSS Selector Rule - tag#id

Example -
For the Sample HTML below-

<input id="fname" type="text" name="firstName" class="textbox">

CSS Locator - input#fname
Description - input#fname will select the 'input' element with id 'fname'.

Using tags and class

CSS Selector Rule - tag.class

Example -
For the Sample HTML below-

<input id="fname" type="text" name="firstName" class="textbox">

CSS Locator - input.textbox
Description - input.textbox will select the 'input' element with id 'textbox'.

Using tags and attributes

CSS Selector Rule - tag[attributeName='attributeValue']

Example -
For the Sample HTML below-

<input id="fname" type="text" name="firstName" class="textbox">

CSS Locator - input[name='firstName']
Description - input[name='firstName'] will select the 'input' element with 'name' attribute having value 'firstName'.

Locating Child Elements (direct child only)

CSS Selector Rule - parentLocator>childLocator

Example -
For the Sample HTML below-

<div id="buttonDiv" class="small">
<button id="submitButton1" type="button" class="btn">Submit</button>
</div>

CSS Locator - div#buttonDiv>button
Description - 'div#buttonDiv>button' will first go to div element with id 'buttonDiv' and then select its child element - 'button'.

Locating elements inside other elements (child or subchild)

CSS Selector Rule - locator1 locator2

Example -
For the Sample HTML below-

<div id="buttonDiv" class="small">
<button id="submitButton1" type="button" class="btn">Submit</button>
</div>

CSS Locator - div#buttonDiv button
Description - 'div#buttonDiv button' will first go to div element with id 'buttonDiv' and then select 'button' element inside it (which may be its child or sub child).

nth child

CSS Selector Rule - :nth-child(n)

Example -
For the Sample HTML below-

<ul id="testingTypes">
<li>Automation Testing</li>
 <li>Performance Testing</li>
 <li>Manual Testing</li>
</ul>

CSS Locator - #testingTypes li:nth-child(2)
Description - '#testingTypes li:nth-child(2)' will select the element with id 'testingType' and then locate the 2nd child of type li i.e. 'Performance Testing' list item.

Locating Siblings

CSS Selector Rule - locator1+locator2

Example -
For the Sample HTML below-

<ul id="testingTypes">
<li id="automation">Automation Testing</li>
<li>Performance Testing</li>
<li>Manual Testing</li>
</ul>

CSS Locator - li#automation + li
Description - 'li#automation + li' will first go to li element with id 'automation' and then select its adjacent li i.e. 'Performance Testing' list item.


For handling dynamic elements having ids and other locators dynamically generated(not known beforehand). We can make use of the above locators by using different parent-sibling relationships of the dynamic elements. Apart from this, we can also use some special CSS locators using which we can match partial values of the attributes.

^ - Starts with

CSS Selector Rule - [attribute^=attributeValue]

Example -
For the Sample HTML below-

<button id="user1_btn_263" type="button" class="btn">Submit</button>

CSS Locator - id^="user1"
Description - 'id^="user1"' will select the element whose id starts with "user1" value

$ - Ends with

CSS Selector Rule - [attribute$=attributeValue]

Example -
For the Sample HTML below-

<button id="user1_btn_263" type="button" class="btn">Submit</button>

CSS Locator - id$="btn_263"
Description - 'id$="btn_263"' will select the element whose id ends with "btn_263" value

* - Contains

CSS Selector Rule - [attribute*=attributeValue]

Example -
For the Sample HTML below-

<button id="user1_btn_263" type="button" class="btn">Submit</button>

CSS Locator - id*="btn"
Description - 'id*="btn"' will select the element whose id contains with "btn" value