CSS Locators in Selenium

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

CSS and CSS Selectors Introduction:
CSS means Cascading Style Sheets, these are used for styling the different elements of an HTML webpage. In the .css files we locate specific elements of a webpage(.html files) and then style them like - set their font size, width, height etc.

To locating the web elements to be styled, we use certain rules provided as CSS Selectors. 
Let's take and 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 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("https://my.oodles.io");

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

CSS Selectors:
Below is the syntax 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' selects 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'selects 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' selects 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'] selects 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 selects 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 selects 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'] selects 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' first goes to div element with id 'buttonDiv' and then select its child element - 'button'.

Locating components 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' first goes 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)' selects 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' first goes to li element with id 'automation' and then select its adjacent li i.e. 'Performance Testing' list item.

To handling dynamic elements having ids and other locators dynamically generated(not known beforehand). We make use of the above locators by using different parent-sibling relationships of the dynamic elements. We may 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"' selects 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"' selects 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"' selects the element whose id contains with "btn" value