How Pro-Testers Use CSS Selectors In Selenium Automation Scripts?

Posted by Bharadwaj Pendyala | February 26, 2019
Automation • Selenium Tutorial •

12877 Views | 8 Min Read

How To Use CSS Selectors In Selenium Automation Scripts

CSS Selectors are used to identifying 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. While there are several other methods to identify element locator 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 below benefits.

Why Choose CSS Selectors Over Other Element Identifiers?

  1. Faster Identification and reduced test execution time – Compared to XPath CSS selectors would tend to identify the elements better as most used browsers such as Chrome and Firefox are tuned for better performance with CSS selectors. Here is the link which provides performance stats for reference.
  2. Availability of better documentation.
  3. Enhanced readability.

Different Ways Of Identifying CSS Selectors in Selenium

Let’s discuss the different ways of identifying the CSS locators of web elements.

Class Selector Conundrum

‘.’ represents a class in CSS and is used to identify web elements with a specific class. For example, if our web element of p is consisting of the class below. The following could be correlated to XPath programming of identifying the class with the tag name [@class = ’value’ ] or it could also be correlated with class name element locator in Selenium.
<p class=" pages-sub-title"> Lambda Test blog post on validating CSS Selectors </p>
CSS selector in Selenium for the same could be identified with the class name as
“.page-sub-title”
The syntax of class selector would be –
<HTML Tag> <.> < Class Name> (or)
<.> <Class Name>

Selector Conundrum

ID Selector Conundrum

‘#’ represents id in CSS and is used to identify web elements with a specific id. Please find an example listed below for matching the web element with ID. If you observe it at a high level this can be compared to that of ID name selector using Selenium methods and also locating the element with id in XPath programming such as tag name [@id = ‘id_value’ ].

CSS selector in Selenium for the same could be identified with the class name as
#menu-item-143 or div#menu-item-143

The syntax of the ID selector would be –
<HTML Tag> <#> < ID Name> (or)
<#> <ID Name>

ID Selector Conundrum

Attribute Selector Conundrum

Attributes could be represented in key-value pairs, for example in the below example we have multiple attributes and values such as ‘role = dialog’, ‘data-dismiss = modal’ etc. Xpath programming version of attribute selector could be correlated as tag name [@attribute key = ‘attribute value’ ].

CSS selector in Selenium for the same could be identified with the class name as
< HTML Tag > [ < attribute key > = ‘< attribute value >’] or [ < attribute key > = ‘< attribute value >’ ]

‘Class or ID’ & Attribute Selector Conundrum

Class or ID and attribute combination could serve as a better strategy which is more powerful than that of using a class, id or attribute selector alone. In order to achieve uniqueness of the element, if above 3 ways of identifying fails due to multiple instances of the same locator this could be a go-to solution. Let’s deduct the element locator strategy for below example from our LambdaTest blog.

In the above HTML snippet if you observe there is a space in the class name which is “navigation main-navigation” this could be represented as navigation.main-navigation space can be ignored and replaced with ‘.’

CSS Selector for the same could be identified as below:

The syntax of class or id and attribute selector would be:
<HTML Tag> <Class Or ID> [ <attribute key> = ‘<attribute value>’ ]
or
<Class Or ID> [ <attribute key> = ‘<attribute value>’ ]

SubString Match Conundrum

In order to enable even powerful querying technique, we can make use of sub-string matches with ^ indicated prefix, $ indicating suffix and * indicating substring. If you observe closely this is similar to the representation of XPath functions such as starts-with, contains and ends with. Let’s get into detailed usage of all the three ways of dealing with matches.

^ Indicating a prefix match

Syntax:
<HTML Tag> [ <Class Or ID> ^= <Class or ID Name> ]
Example:

$ Indicating a suffix match

Syntax:
<HTML Tag> [ <Class Or ID> $= <Class or ID Name> ]
Example:

* Indicating a substring match

Syntax:
<HTML Tag> [ <Class Or ID> *= <Class or ID Name> ]
Example:

Inner Text Conundrum:

One of the most easily readable syntaxes yet powerful. You can make use of this mechanism to identify text anywhere on the DOM using a string pattern.

Syntax:
<HTML Tag> <:> <contains> < (text) >

Example

“Navigating Through Child Elements” – Child Conundrum:

This is an advanced way of handling the element locators through CSS selectors in Selenium while navigating through child elements. There are three possibilities as below:

  1. Direct Child
  2. Sub Child
  3. Nth Child

Direct Child

Direct child to the parent locator is represented with a ‘>’ symbol. Let’s assume we have a button tag inside a div tag which happens to be a direct child as shown in HTML snippet below.

Example:
<div class="lambdatest-xs-ng">
<button id="tertiary" class="sidebar-container" role="complementary">

div is parent locator and the button is the child locator is represented as:
div.lambdatest-xs-ng>button
Syntax:
Parentlocator > directchildlocator

Sub Child or Child

Sub child identification includes the same way to identify the elements as that of the direct child but we can ignore ‘>’ symbol as sub child as shown in the example below.

Example:
<div id="primary" class="content area">
<div id="content" class="site content" role="main">
<header class="archive header">
<h1 class="archive title">Category Archives : Infographics </h1>

Sub Child or child would be represented as:

Syntax:

Nth Child For Opting A Specific Value From A List

This is an advanced way of handling the element locators through CSS selectors in Selenium while navigating through child elements. There are three possibilities as below:

  1. Direct Child
  2. Sub Child
  3. Nth Child

Direct Child

Direct child to the parent locator is represented with a ‘>’ symbol. Let’s assume we have a button tag inside a div tag which happens to be a direct child as shown in HTML snippet below.

Example:

div is parent locator and the button is the child locator is represented as:

Syntax:

Sub Child or Child

Sub child identification includes the same way to identify the elements as that of the direct child but we can ignore ‘>’ symbol as sub child as shown in the example below.

Example:

Sub Child or child would be represented as:

Syntax:

Nth Child For Opting A Specific Value From A List

N-th child concept would be useful while navigating through ordered or unordered list elements. N becomes the number of the desired list user wants to select. Let’s go through below example to understand how n-th child works. In o

Example:

Nth child of firefox from the list of lambda test browsers would be represented as:

Syntax:

Conclusion

We have come across different identification strategies through the above element locator conundrums. To get familiar with CSS Selectors in Selenium by querying you make use of Chrome dev tools and also there is an open-sourced tool for the same to try out and view results more interactively at http://flukeout.github.io/. We also discussed the benefits of using CSS selectors in Selenium over other element locators. One of the major drawbacks of the CSS selectors in Selenium is traversing the DOM is not possible with CSS as that of XPath. We can navigate from child to parent and parent to child using XPath. But we can only navigate from parent to child by CSS Selectors in Selenium. If you have any queries or suggestions regarding the CSS Selectors please drop a comment below and I would love to interact. Have fun locating elements through CSS Selectors. Happy testing!

Written by Bharadwaj Pendyala

Bharadwaj has more than 5+ year of experience in handling Automation Testing who is also an expert in handling Manual Testing, API Automation, Performance Testing and Certified Agile Practitioner who is currently handling projects in TDD and BDD methodologies with both custom built and hybrid automation frameworks

Related Articles

Role of Automation Testing in CI CD Pipeline

Role of Automation Testing in CI CD Pipeline

30028 Views | 16 Min Min Read

Leave a Reply