CSS Selectors in Selenium


css selectors in selenium



Hi All! Today we will look at how we can use CSS Selector in Selenium. CSS Selector is one of the 8 ways of locating elements on a web page.

Since CSS is the language of the Web, it is faster and more convenient as compared to XPath(Another locator for locating web elements).


How to Test/Validate CSS Selector Query

For validating CSS Selector Query:
  • Open Chrome Browser
  • Open Developer Tools(Use Shortcut CTRL + SHIFT + I)
  • Click anywhere in the Elements window and click CTRL + F.
  • Write Your CSS Query and Click Enter.

See the image below for further understanding.



Below are the ways of selecting elements using CSS Selector :

CSS Selector : ID

Hash(#) is used for selecting a web element with ID.

Syntax: #<id_value> or tagname#<id_value>

Example: #username or input#username


Consider the following HTML code: 
 <div>   
    <input id="username" type="text" name="username" />   
  </div>

You can use # for selecting the username input box; 
 WebElement username = driver.findElement(By.cssSelector("#username"));


CSS Selector : Class

A dot (.) is used for selecting a web element with Class.

Syntax: .<class_value> or tagname.<class_value>

Example: .inputbox or input.inputbox


Consider the following HTML code: 
 <div>   
    <input class="inputbox" id="username" type="text" name="username" />   
  </div>

You can use . for selecting the username input box; 
 WebElement username = driver.findElement(By.cssSelector(".inputbox"));


CSS Selector: Multiple Classes

Syntax: .class1.class2.class3...classn

Example: .inputbox.active or input.inputbox.active 


Consider the following HTML code: 
 <div>   
    <input class="inputbox active" id="username" type="text" name="username" />   
  </div>

You can use a dot(.) for selecting the username input box; 
 WebElement username = driver.findElement(By.cssSelector(".inputbox.active"));


CSS Selector: Selecting element using attributes

Syntax: tagname[attribute='value']

Example: input[id='username']


Consider the following HTML code: 
 <div>   
    <input class="inputbox" id="username" type="text" name="username" />   
  </div>

You can use . for selecting the username input box; 
 WebElement username = driver.findElement(By.cssSelector("input[id='username']"));


CSS Selector: Accessing Children

Navigating to children is done by an arrow(>).

Syntax: parent>child

Example: input[id='username']


Consider the following HTML code: 
 <ul class=”list”>  
   <li>Child1</li>   
   <li> Child2</li>   
   <li> Child3</li>   
   <li> Child4</li>   
  </ul>

Selenium Code : Selects all <li> inside <ul>
 List<WebElement> list = driver.findElement(By.cssSelector(".list>li"));


CSS Selector: Selecting the First Child

first-of-type is used to select the first child from all the children tags.

Syntax: parent>child:first-of-type

Example: ul>li:first-of-type

Consider the following HTML code: 
 <ul class=”list”>  
   <li>Child1</li>   
   <li> Child2</li>   
   <li> Child3</li>   
   <li> Child4</li>   
  </ul>

Selenium code that selects first-child, i.e., <li>Child1</li>
 List<WebElement> list = driver.findElement(By.cssSelector(".list>li:first-of-type"));


CSS Selector: Selecting the Last Child

last-of-type is used to select the first child from all the children tags.

Syntax: parent>child:last-of-type

Example: ul>li:last-of-type


Consider the following HTML code: 
 <ul class="list">  
   <li>Child1</li>   
   <li> Child2</li>   
   <li> Child3</li>   
   <li> Child4</li>   
  </ul>

Selenium code that selects last-child, i.e., <li>Child4</li>
 List<WebElement> list = driver.findElement(By.cssSelector(".list>li:last-of-type"));


CSS Selector : Selecting nth-child

nth-of-type is used to select the child passed in the index.

Syntax: parent>child:nth-of-type(index)

Example: ul>li:nth-of-type(3)


Consider the following HTML code: 
 <ul class="list">  
   <li>Child1</li>   
   <li> Child2</li>   
   <li> Child3</li>   
   <li> Child4</li>   
  </ul>

Selenium code that selects third child, i.e., <li>Child3</li>
 List<WebElement> list = driver.findElement(By.cssSelector(".list>li:nth-of-type(3)"));


CSS Selector: Finding Next Sibling

Plus(+) is used to select the next sibling.

Syntax: parent>child:first-of-type+<tag>

Example: ul>li:first-of-type+li

Consider the following HTML code: 
 <ul class="list">  
   <li>Child1</li>   
   <li> Child2</li>   
   <li> Child3</li>   
   <li> Child4</li>   
  </ul>

Selenium code that selects second child, i.e., <li>Child2</li>
 List<WebElement> list = driver.findElement(By.cssSelector(".list>li:first-of-type+li"));


CSS Selector : Regular Expression(contains)

Below syntax will help you find a tag whose id contains text user.

Syntax: tag[id*=’user’]


Selenium code to do the same:
 WebElement username = driver.findElement(By.cssSelector("input[id*='user']"));


CSS Selector : Regular Expression(starts with)

Below syntax will help you find a tag whose id contains text user.

Syntax: tag[id^=’user’]


Selenium code to do the same:
 WebElement username = driver.findElement(By.cssSelector("input[id^='user']"));


CSS Selector : Regular Expression(ends with)

Below syntax will help you find a tag whose id contains text user. 

Syntax: tag[id$=’user’]


Selenium code to do the same:
 WebElement username = driver.findElement(By.cssSelector("input[id$='name']"));



That's it from my side for CSS Selectors in Selenium. Feel free to try these and comment down below if any doubts.

Thank You!