Css Selectors In Selenium

CSS Selectors in Selenium

Welcome to our guide on CSS Selectors in Selenium! If you’re into web automation and testing, understanding how to select and interact with web elements is key. CSS Selectors are vital tools for precisely pinpointing and manipulating elements on a webpage. 

In this blog, “CSS Selectors in Selenium,” we’ll delve into CSS Selectors, their use in Selenium, and why they are significant for effective web automation. Whether you’re an absolute beginner or looking to enhance your Selenium skills, this guide will provide valuable insights to leverage CSS Selectors for seamless automation. Let’s get started!

CSS stands for Cascading Style Sheets. CSS Selectors are like special codes which help us find things on a web page easily, such as specific parts of text or buttons. They work by identifying elements based on their unique features, like their name, special ID, or how they look (read ID, tag, class name, etc).

Think of CSS Selectors like special search terms that point to exactly what you’re looking for on a webpage. Even though there are easier ways to find things on a webpage, using CSS Selectors is a bit tricky but really useful, especially when the things you’re looking for don’t have easy names or IDs. 

Equip your skills to elevate any web page with our comprehensive CSS Training in Chennai

Let’s explore various types of sample CSS Selectors.

Inner Text

The specific string patterns presented by an HTML tag within a webpage are known as its inner text. Utilizing this text effectively allows for the creation of a CSS Selector, enabling targeted access to a particular web element.


<HTML tag><:><contains><(text)>


Each web element has a special ID that sets it apart from the others. You can find and select that element using the CSS Selector with this unique ID.


<HTML tag><#><attribute value>

Class Name

This CSS Selector uses the class name of the element to find it on the webpage.


<HTML tag><.><Class value>


The best option is to choose a unique attribute value that stands out, making it easier to identify when creating the CSS Selector.


<HTML tag><[attribute=Value of attribute]>

Tag, Class, and Attribute

The CSS Selector is precisely derived by considering the class name, attribute value, and tag name to accurately locate the web element.



Tag, Attribute

This approach emphasizes identifying a web element on a webpage by using the tag name and attribute value.



Enroll in our HTML Training in Chennai to delve into the world of web development along with CSS.

Using the CSS Selector to Find an Object

package org. webdriver:

import org.openqa.selenium.By:

import org.openqa.selenium.WebDriver:

import org.openga.selenium.firefox.FirefoxDriver:

public class FindObject Using CssSelector


public static void main(String[] args)


//launch Firefox Browser

WebDriver driver=new FirefoxDriver();




* Target Element Using CssSelector when Unique property

available ID

* Htmlsource:—>

* <inputid=”u_0_1″_type=”text”>

* Locator:-—>

* #id





* Target Element Using CssSelector

* Htmlsource:—>

* <inputid=”u_0_1″_class=”inputtext”>

* Locator:—>

* #id. classname


driver. findElement(By.cssSelector(“#u_0_1.inputtext”)).clear();




* Target Element Using CssSelector

* Htmlsource:——>

* <inputid=”u_0_1″ class=”inputtext”>

*  Locator:-—->

* tagname#id.classname





* Target Element Using CssSelector when class property having


* Html source:—>

* <input class=”inputtext 58mg_ Sdba _2ph-“>


*  Locator:-—->

* Space cover with <==. ===>



driver.findElement(By.cssSelector(“.inputtext. 58mg. _Sdba._2ph-



“).sendKeys(“Class with space”);


Finding using XPath:

XPath is a fundamental language mainly used to find and pinpoint elements in Extensible Markup Language (XML). To simplify, HTML is like a real-life application of XML in coding. A major advantage of XPath is its ability to access elements even when they lack specific identifiers like class, id, or tag.

However, the downside is that using XPath can be complex due to its restrictions and intricate functionalities. Thankfully, tools like Firebug can generate XPath locators dynamically, making it easier for beginners or those with minimal coding knowledge to benefit from this approach.”

Preparing XPath Manually:

There are two distinct formats of Xpath available—they are, as follows

  1. Absolute XPath
  2. Relative XPath

Absolute XPath:

Absolute XPath is mainly used to locate an element based on its tag name and position. Typically, we use this approach when the properties of the object keep changing, but its position on the page remains fixed.

Absolute XPath: Syntax:

 —>/html/body/child tagname…..(nameoftag)

To generate an Absolute XPath:

  1. Open the window.
  2. Navigate to the ‘Open List.’
  3. Select ‘Generate Absolute Path’ from the file path list.”

The method called getElementById() finds and accesses a single element by using the specified ID in the brackets. In contrast, getElementsByName() allows access to a group of elements by specifying a single name. These elements can be accessed by mentioning their index number.

Location by DOM:

The method called getElementById() finds and accesses a single element by using the specified ID in the brackets. In contrast, getElementsByName() allows access to a group of elements by specifying a single name. These elements can be accessed by mentioning their index number.

How is CSS better than XPath? 

  1. Efficiency: CSS offers faster processing and superior performance compared to XPath, optimizing automation speed.
  2. Simplicity: CSS selectors are more user-friendly and easier to understand, especially for individuals with limited coding knowledge.
  3. Effective for Basics: CSS excels in selecting elements using basic attributes like IDs, classes, and tag names, streamlining the automation process.
  4. Reusability: CSS selectors can be reused across multiple elements or pages, enhancing the efficiency and maintainability of automation scripts.
  5. Clarity: The clear and straightforward format of CSS selectors ensures better readability and comprehension, simplifying script maintenance, even for newcomers to automation.


In conclusion, Mastering CSS Selectors in Selenium is a game-changer for web automation. With their speed, scalability, and versatility, CSS selectors enables efficient element targeting. Reusability and readability further underscore their importance. Equipping yourself with this knowledge opens doors to seamless and effective automation, ensuring a successful journey in the dynamic world of web development and testing.

Enroll in our Selenium Training in Chennai now and take the first step towards mastering web automation!”

Leave a Comment