Getting Started with CSS Selectors

In UI or front-end test automation, a locator or selector is a term that defines how to identify a web element on a webpage so that actions can be performed on it. Essentially, it’s the “address” of the web element within the Document Object Model (DOM). Web elements can include input fields, buttons, tables, links, radio buttons, checkboxes, and more.

One of the most widely used methods for locating web elements is through CSS selectors. CSS selectors are strings that identify web elements based on attributes like IDs, classes, types, or their structural position within the document. They are highly versatile and compatible with popular front-end test automation frameworks such as Selenium, Playwright, and Cypress.

Here’s an example Java code snippet from Selenium’s official documentation:

WebDriver driver = new ChromeDriver();
driver.findElement(By.cssSelector("#fname"));

In this example, the string #fname is a CSS selector that targets an element with the ID “fname”.

A common challenge in test automation is reducing test flakiness and ensuring the reliability of test scripts. Test flakiness occurs when automated tests produce inconsistent results—sometimes passing, sometimes failing—without any changes to the code, environment, or data. Poorly chosen CSS selectors can contribute significantly to flakiness, making tests unreliable. Selecting robust CSS selectors that remain stable despite minor changes in page structure or content is essential for reliable testing.

CSS selectors are easy to learn and apply, making them an excellent tool for beginners and experienced testers alike. In the following tutorials, you’ll explore various CSS selector syntaxes that cover all your needs for locating web elements in test automation.