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

Image for post
Image for post

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. Availability of better documentation.
  2. Enhanced readability.

Different Ways Of Identifying CSS Selectors in Selenium

Class Selector Conundrum

<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>
Image for post
Image for post

ID Selector Conundrum

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

CSS selector in Selenium for the same could be identified with the class name as


<HTML Tag> <#> < ID Name> (or)
<#> <ID Name>
Image for post
Image for post

Attribute Selector Conundrum

<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 class name as

div[role=’dialog’] or [role=’dialog’]

The syntax of attribute selector would be –

< HTML Tag > [ < attribute key > = ‘< attribute value >’] or [ < attribute key > = ‘< attribute value >’ ]

‘Class or ID’ & Attribute Selector Conundrum

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

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

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

^ Indicating a prefix match

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

Example:

div[class^=’aria-label’]

$ Indicating a suffix match

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

Example:

a[class$=’aria-label’]

* Indicating a substring match

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

Example:

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

Inner Text Conundrum:

Syntax:

div:contains(“^lambdatest$”)

Example:

div:contains(“^lambdatest$”)

“Navigating Through Child Elements” — Child Conundrum:

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

Direct Child

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

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:

div#primary header

Nth Child For Opting A Specific Value From A List

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

Direct Child

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

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>

Nth Child For Opting A Specific Value From A List

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

Conclusion

Originally published at LambdaTest

Author Bharadwaj Pendyala

Image for post
Image for post

Written by

Product Growth at @lambdatesting (www.lambdatest.com)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store