How to write CSS selector in Selenium?
Tags: Software Testing, Css Selectors, Automation Testing, Selenium Webdriver, Selenium

Many people who are beginners or people who want to switch from manual to automation lacks in writing CSS Selector for locating web elements as writing CSS selectors than XPath is a little complex(In my opinion). But this blog will help you to become a master in writing CSS Selector locator & CSS concept.

This article covers all basics of writing CSS Selector. It will also help you to learn to write CSS selectors from the beginning. Moreover, It will provide tips to write CSS selectors in faster ways. This topic also covers interview questions for CSS Selectors.

What is CSS?

CSS stands for Cascading Style Sheet.

What is the use of CSS?

CSS gives a look & layout to the website. It helps in making the website more beautiful along with the HTML.

What is CSS Selector in Selenium WebDriver?

CSS Selector is one of the locators in Selenium to locate a web element on the web page. CSS selectors select HTML elements according to their id, class, type, attribute, etc.

Why we use CSS Selector in Selenium WebDriver?

To identify an element on the Webpage.

On a web page, sometimes the attributes or tags form some kind of pattern with page refresh or navigation which is called dynamic objects, and to find these types of web elements we have to write a dynamic CSS Selector or XPath.

What are the benefits of CSS Selectors?

CSS Selectors are more readable, short & precise.

CSS Selectors are faster than XPath especially in the case of IE.

CSS Selectors locate an element in the forward direction only.

CSS Selectors are widely used.

What are the drawbacks of CSS Selectors?

Old browsers do not support all CSS features( i.e. IE8).

IE8). Using CSS Selectors an element can be found using only top to down scan.

Writing complex CSS selectors is difficult.

Syntax of CSS Selector:

CSS Selector = <HTML tag> Symbol — ‘#’ or ‘.’ <Attribute Value>

<HTML tag> : Used to specify the web element.

‘#’: Represents ID attribute

‘.’: Represents Class attribute

<Attribute Value>: Used to specify the value of an attribute

To become pro in writing CSS Selector you must mug up the symbols and their meanings:

ID: ‘#’

Class: ‘.’

Direct Child: ‘>’

Child or Sub child: ‘white space’

Adjacent Sibling: ‘+’

Match with prefix or starts with: ‘^’

Match with a suffix or ends with: ‘$’

Match with substring or contains: ‘*’

To locate particular web element based on its position: ‘:nth-child()’

To match the inner text: ‘contains()’

Different ways to write the CSS Selector:

1. Using ID:

Syntax: tag#id or #id

Example: input#Email or #Email

2. Using Class Name:

Syntax: tag.className

Example: input.inputText

3. Using tag & attribute or attribute value or tag, class & attribute:

Syntax:

tagName[attributeName=’value’]

[attributeName=’value’]

tagName.class[attribute=’value’]

Sample HTML Code: <img src= “animal.jpg” class= “animalgroup”> img[src= ‘animal.jpg’] [src= ‘animal.jpg’]

img.animalgroup [src=‘animal.jpg’]

4. Starts with or prefix:

Syntax: tagname[Attribute^= ‘Prefix of Attribute value’]

Example: input[name^=’S’]

5. Ends with or suffix:

Syntax: tagname[Attribute$= ‘suffix of Attribute value’]

Example: input[name$=’S’]

6. Match with substring:

Syntax: tagname[Attribute*=’subString of Attribute value’]

Example: input[name*=’user’]

7. Finding a direct child element:

Syntax: tagname > attribute

Example: div > img

8. Finding child or sub child:

Syntax: tagname attribute

Example: div img

9. Finding the following sibling:

Syntax: id or tagname + tagname

Sample HTML Code:

<img src= “animal.jpg” class= “animalgroup”> Wild Animal

Example:‘img + p1’ or #animalgroup + p1

10. Finding a specific element at a particular position:

Sample HTML Code

<ul id=”animals”> <li>Lion</li> <li>Dog</li> <li>Cat</li> </ul>

Using nth-child():

Example: #animal li:nth-child(2) — It will select the element with id ‘animal’ and then locate the 2nd child of type li i.e. ‘Dog’

Using nth-of-type():

Example:#animal li:nth-of-type(2) — It will locate the 2nd child of type li. nth-of-type() takes tag type into the account to locate an element.

11. Using contains():

Syntax: tag:contains(‘text’)

Example: a:contains(‘Login’)