CSS Selector Selenium

Hello, In this tutorial we will see How to use CSS Selector in selenium.

CSS(Cascading Style Sheets) Selector is use to identify the webelement on the web pages. When we want to automate an application first thing is to identify the the webelement.
So there are different way to identify the element like using xpath, id, class etc. but one of the most important and fastest locator is CSS Selector.

Advantage of using CSS Selector:-

1. Xpath may be change browser to browser but CSS seletor will not be change.
2. CSS Selector is much more faster than xpath.
3. Xpath tend to more complex and hence make hard to read.


Now primitive types of CSS Selector:-

1. ID

2. Class

3. Attribute

4. Sub-String

5. ID/Class & Attribute

1. Syntax for ID:- If we want to use ID as a locator than we need to use '#' symbol in front of ID value or Html tagname then # symbol then ID attribute.

    Example: #IDValue or htmltag#IDValue

In below picture we can better understand:

CSS Selector is: #usernameId or input#usernameId


2. Syntax for Class:- If we want to use Class as a locator than we need to use '.' symbol in front of class value or Html tagname then . symbol then class attribute.

Example: .ClassValue or htmltag.ClassValue

In below picture we can better understand:

CSS Selector is: .loginUserId or input.loginUserId


3. Syntax for Attribute:- If we want to use Attribute as a locator than we need to use Html tagname, attribute type and attribute value.

Example: Htmltagname[attributeName=attributeValue]

In below picture we can better understand:

 

CSS Selector is: input[id=usernameId] or input[class=loginUserId]



                                     Click to know How to handle dynamic Xpath


   

4. Syntax for Sub-String:- This is very interesting feature to create CSS Selectors using substrings. There are three mechanisms in which CSS Selector can be created.

    a) Match a starting text in a string
    b) Match a ending text in a string
    c) Match a contains text in a string

  There are some special characters defined by which we can find above mentioned criteria.
 
    a) '^' : By this symbol we will select starting text in a string.
    b) '$' : By this symbol we will select ending text in a string.
    c) '*' : By this symbol we will select contains text in a string.

Example: Htmltagname[attributeName^=attributeValueWithStaringText]
                Htmltagname[attributeName$=attributeValueWithEndingText]
Htmltagname[attributeName*=attributeValueWithContainsText]

CSS Selector is: input[id^=usernam] or input[id$=ameId] or input[id*=ameI]


5. Syntax for ID/Class & Attribute:- In this, we will use html tagname, attributeName, attributeValue.We can also use multiple attributeName, attributeValue.

   Example: htmltagname[attributeName=attributeValue][attributeName=attributeValue]
 

   CSS Selector is: input[id=usernameId][type=text]
                              input[class=loginPassword][type=password]



                  Hope that you have learnt How to use CSS Selector in selenium.