CSS Selectors in Selenium

CSS Selectors in Selenium are used to identify a user desired HTML web element. This fits into an element locator strategy of automated test development where the primary aim is to interact with page elements through different types of locators. There are several other methods to identify element locators such as id, name, class name, link text, partial link text, XPath, tag name etc. other than CSS selectors in Selenium we prefer the CSS way due to the benefits below.

Why Choose CSS Selectors in Selenium Over Other Element Identifiers?

• Faster Identification and reduced test execution time 
• Availability of better documentation.
• Enhanced readability.

CSS Selectors

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

1.Using Id

CSS Selector Rule : #id

Example 

For the Sample HTML below-

CSS Locator :  #submitButton1

Description : #submitButton1’ will select the element with id ‘submitButton1’.

2.Using class

CSS Selector Rule : .class

Example 

For the Sample HTML below-

CSS Locator : .btn

Description : ‘.btn’ will select all the elements with class ‘btn’.

3.Using tag

CSS Selector Rule : tagName

Example 

For the Sample HTML below-

CSS Locator : input

Description : ‘input’ will select all the input type elements.

4.Using attributes and their value

CSS Selector Rule : [attributeName=’attributeValue’]

Example 

For the Sample HTML below

CSS Locator : [name=’firstName’]

Description : [name=’firstName’] will select the elements with name attribute having value ‘firstName’.

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

1.Using tags and id

CSS Selector Rule : tag#id

Example 

For the Sample HTML below

CSS Locator :  input#fname

Description : input#fname will select the ‘input’ element with id ‘fname’.

2.Using tags and class

CSS Selector Rule : tag.class

Example 

For the Sample HTML below

CSS Locator : input.textbox

Description : input.textbox will select the ‘input’ element with id ‘textbox’.

3.Using tags and attributes

CSS Selector Rule – tag[attributeName=’attributeValue’]

Example 

For the Sample HTML below

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

CSS Locator :div#buttonDiv>button

Description : ‘div#buttonDiv>button’ will first go to the div element with id ‘buttonDiv’ and then select its child element – ‘button’.

Locating elements inside other elements (child or sub child)

CSS Selector Rule : locator1 locator2

Example 

For the Sample HTML below

CSS Locator : div#buttonDiv button

Description :‘div#buttonDiv button’ will first go to the 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

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-

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. 

we can also use some special CSS selectors using which we can match partial values of the attributes.

1.^ – Starts with

CSS Selector Rule : [attribute^=attributeValue]

Example 

For the Sample HTML below

CSS Locator : id^=”user1″

Description : ‘id^=”user1″‘ will select the element whose id starts with “user1” value

2.$ – Ends with

CSS Selector Rule : [attribute$=attributeValue]

Example 

For the Sample HTML below

CSS Locator : id$=”btn_263″

Description : ‘id$=”btn_263″‘ will select the element whose id ends with “btn_263” value

3. *– Contains

CSS Selector Rule : [attribute*=attributeValue]

Example 

For the Sample HTML below

CSS Locator : id*=”btn”

Description : ‘id*=”btn”‘ will select the element whose id contains with “btn” value