CSS Selectors in Selenium: Pro-Tester’s Mastering Guide

Different Ways Of Identifying CSS Selectors in Selenium

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

New to CSS selectors? Check out this CSS selectors cheat sheet before working through the examples below.

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 in Selenium </p>

CSS selector in Selenium for the same could be identified with the class name as“.pages-sub-title”The CSS syntax in Selenium of class selector would be – <.> < Class Name> (or) <.>

Austin Siewert

Co-Founder, Steadfast Systems

Discovered @TestMu AI yesterday. Best browser testing tool I've found for my use case. Great pricing model for the limited testing I do 👏

2M+ Devs and QAs rely on TestMu AI

Deliver immersive digital experiences with Next-Generation Mobile Apps and Cross Browser Testing Cloud

Sign up with googleSign up with Email

This certification is for anyone who wants to stay ahead among professionals who are growing their career in Selenium automation testing.

Here’s a short glimpse of the Selenium 101 certification from TestMu AI:

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’ ].

<li id="menu-item-143" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-143">
<a href="https://www.testmuai.com/blog/category/testmu-ai-updates/">Product Updates</a>
</li>

CSS selector in Selenium for the same could be identified with the ID as #menu-item-143 or li#menu-item-143

The CSS syntax in Selenium of the ID selector would be – <#> < ID Name> (or) <#>

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’ ].

<div class="modal fade" id="whitepaper-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
   <span class="close" data-dismiss="modal"  style="top: 4px; position: absolute; right: 10px;">
<span aria-hidden="true">×</span>
 </span>

CSS selector in Selenium for the same could be identified with the attribute asdiv[role=’dialog’] or [role=’dialog’]

‘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 TestMu AI blog.

<nav id="site navigation" class="navigation main-navigation" role="navigation">

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 in Selenium for the same could be identified as below:

nav.navigation.main-navigation[role='navigation']

The CSS syntax in Selenium of class or id and attribute selector would be:

<HTML Tag> <Class Or ID> [ <attribute key> = ‘<attribute value>’ ]

<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:

div[class^=’aria-label’]

$ Indicating a suffix match

Syntax:

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

Example:

a[class$=’aria-label’]

* Indicating a substring match

Syntax:

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

Example:

p[class*=’aria-label’]

Inner Text Conundrum:

The :contains() pseudo-class shown below is not part of the CSS standard. It works only in libraries such as jQuery, so browsers reject it and Selenium's By.cssSelector() throws an InvalidSelectorException.

To locate an element by its inner text, use an XPath expression such as //div[contains(text(),'Sign in')] instead.

Syntax:

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

Example

div:contains("^lambdatest$")

“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:

• Direct Child
• Sub Child
• 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 className="lambdatest-xs-ng"> <button id="tertiary" className="sidebar-container" role="complementary">div is parent locator and the button is the child locator is represented as:div.lambdatest-xs-ng>buttonSyntax: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:

div#primary header

Syntax:

<parent locator=""> <child locator=""> or <sub child="" locator=""></sub></child></parent>

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:

• Direct Child
• Sub Child
• 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:

<Parent locator> <child locator> or <sub child locator>

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.

Example:

<<ul id = "lambdaTestBrowsers">
<li>Chrome</li>
<li>Firefox</li>
<li>Edge</li>
<li>Safari</li>
</ul>

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

#lambdaTestBrowsers li:nth-child(2)

Syntax:

<HTML Tag> <Clas or ID> <list> <:> <nth-child (number of desired item in the list)>