Selenium-pythonHow-ToBeginner · 4 min read

How to Use CSS Selector in Selenium for Web Element Identification

In Selenium, use By.cssSelector to locate elements with CSS selectors. Pass the CSS selector string to driver.findElement(By.cssSelector("your_selector")) to find the element on the page.

📐

Syntax

The basic syntax to use a CSS selector in Selenium is:

driver.findElement(By.cssSelector("css_selector")) - Finds the first element matching the CSS selector.
driver.findElements(By.cssSelector("css_selector")) - Finds all elements matching the CSS selector.

Here, css_selector is a string representing the CSS selector pattern.

java

WebElement element = driver.findElement(By.cssSelector("css_selector"));

💻

Example

This example shows how to open a webpage and find a button using a CSS selector by its class name.

java

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class CssSelectorExample {
    public static void main(String[] args) {
        System.setProperty("webdriver.chrome.driver", "path/to/chromedriver");
        WebDriver driver = new ChromeDriver();
        driver.get("https://example.com");

        // Find button by CSS class
        WebElement button = driver.findElement(By.cssSelector(".btn-primary"));

        // Check if button is displayed
        if (button.isDisplayed()) {
            System.out.println("Button found and visible.");
        } else {
            System.out.println("Button not visible.");
        }

        driver.quit();
    }
}

Output

Button found and visible.

⚠️

Common Pitfalls

Common mistakes when using CSS selectors in Selenium include:

Using incorrect or overly complex selectors that do not match any element.
Confusing CSS selector syntax with XPath syntax.
Not escaping special characters in selectors.
Using IDs or classes that are dynamic and change on page reload.

Always verify your CSS selector in browser DevTools before using it in Selenium.

java

/* Wrong: Using XPath syntax in CSS selector */
// driver.findElement(By.cssSelector("//div[@id='main']")); // This will fail

/* Right: Correct CSS selector syntax */
// driver.findElement(By.cssSelector("div#main"));

📊

Quick Reference

CSS Selector	Description	Example
.class	Selects elements with class	.btn-primary
#id	Selects element with id	#submit-button
tag	Selects elements by tag name	input
tag.class	Selects tag with class	button.btn
parent > child	Selects direct child	div > p
[attr='value']	Selects elements with attribute value	input[type='text']

✅

Key Takeaways

Use By.cssSelector("selector") to locate elements with CSS selectors in Selenium.

Test your CSS selectors in browser DevTools before using them in your tests.

Avoid mixing XPath syntax with CSS selectors to prevent errors.

Use simple and stable selectors to reduce flaky tests.

Remember to quit the WebDriver session after test execution.