CSS Selectors Cheat Sheet (Basic & Advanced)

Browser Automation requires navigation through the elements of HTML / XML pages to automate its functions for website test automation. Frameworks like Selenium use CSS Selectors to identify web elements and perform the required functions for testing. This comprehensive CSS Advanced Selectors Cheat Sheet discusses various types of CSS Selectors and how to use them in a quick-to-read format.

What is CSS Selector?

Selectors/Locators involve identifying an HTML element to perform actions using Automation tools like Selenium and Cypress. CSS selectors come into the picture when selecting an element based on style sheet information.

A wide variety of CSS selectors are available, allowing for fine-grained precision when selecting elements.

Types of CSS Selectors

CSS Selectors can be broadly grouped into the below categories:

• Basic Selectors
• Grouping Selectors
• Combinators
• Pseudo

Basic CSS Selectors Cheat Sheet

Here is a tabular cheat sheet of the Basic CSS Selectors:

Advanced CSS Selectors Cheat Sheet

Here is the tabular cheat sheet of Advanced CSS Selectors like Grouping Selectors, Combinators, and Pseudo:

1. Grouping Selectors

2. Combinators

3. Pseudo

Try it out on BrowserStack!

Once you’ve glanced through both the CSS Selectors cheat sheet, you can try out the above different types of CSS Selectors using the below examples 

1. Access BrowserStack demo application
2. Open dev tools by clicking F12 on keyboard
3. Navigate to the Console tab
4. Paste the selector given in the Example Column

Example: Using CSS Advanced Selectors for Test Automation in Selenium Java

In the below example,

1. Accessing the BrowserStack demo application 
2. Waiting for the Select drop-down to be visible using CSS selectors
3. Selecting the value from the drop-down using CSS selector which belongs to Combinators >> Descendant category

Prerequisites:

1. Add TestNG dependency to the project
2. Add Selenium dependency to the project
3. Download ChromeDriver and update the path in setProperty method.

Code for using Advanced Selectors for Selecting a Drop Down Value using Selenium Java

package com.testng.selenium.v1;

import java.io.File;
import java.time.Duration;
import java.util.NoSuchElementException;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.FluentWait;
import org.openqa.selenium.support.ui.Select;
import org.openqa.selenium.support.ui.Wait;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;


public class SeleniumTestngTest {
WebDriver driver;

@BeforeTest
public void initDriver() {
String path = System.getProperty("user.dir") + File.separator + "driver" + File.separator
+ "chromedriver";
System.setProperty("webdriver.chrome.driver", path);
driver=new ChromeDriver();
driver.manage().window().maximize();
}

@Test
public void firstTest () {
driver.get("https://www.bstackdemo.com/");
Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)
.withTimeout(Duration.ofSeconds(40))
.pollingEvery(Duration.ofSeconds(2))
.ignoring(NoSuchElementException.class);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(".sort select")));
Select select = new Select(driver.findElement(By.cssSelector(".sort select")));
select.selectByVisibleText("Lowest to highest");
}

@AfterTest
public void tearDown() {
driver.close();
driver.quit();
}

}

On a closing note

This article for CSS selectors cheat sheet covers different types of CSS selectors that can be used to build reliable and less flaky locators for automation tools like Selenium and Cypress. Compared to finding elements with XPath, the CSS selector targets specific elements in the DOM with its styling and attribute information.

CSS selector allows us to identify elements based on their properties like their color, background, and state of the element like disabled or enabled. This provides granular control over how we identify and select details.

Using CSS Selectors with Selenium, you can automate various elements on the HTML pages for testing web applications.