Test Automation Stack

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 you need to select an element based on style sheet information.

There are a wide variety of CSS selectors 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 representation of the Basic CSS Selectors:

Advanced CSS Selectors Cheat Sheet

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

1. Grouping Selectors

2. Combinators

3. Pseudo

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

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 covers different types of CSS selectors that can be used to build reliable and less flaky locators for automation tools like Selenium and Cypress. When 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 the elements’ properties like their color, background, and state of the element like disabled or enabled. This provides a granular level of control over how we identify and select elements.

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

---

Originally published at https://www.browserstack.com.