CSS Selector in Selenium: Locate Elements with Examples

This article will discuss and describe, with examples, how one can use CSS selectors in Selenium test scripts to identify web elements. It will also depict CSS selectors’ syntax in Selenium.

It is recommended to gain a deeper understanding of locators in Selenium before narrowing it down to CSS selectors in particular.

What is a CSS Selector?

CSS (Cascading Style Sheets) Selectors in Selenium are used to identify and locate web elements based on their id, class, name, attributes and other attributes. CSS is a preferred locator strategy as it is simpler to write and faster as compared to XPath.

By.cssSelector(String cssSelector) method is used to locate the elements in Selenium WebDriver. This method accepts a CSS Selector String as an argument which defines the selection method for the web elements.

The CSS Selector combines an element selector and a selector value that can identify particular elements on a web page. Like XPath in Selenium, CSS selectors can locate web elements without ID, class, or Name.

Types of CSS Selectors in Selenium (with Examples)

There are five types of CSS Selectors in Selenium tests:

1. ID
2. Class
3. Attribute
4. Sub-String
5. Inner String

We would be using BStackDemo application to understand some important CSS Selector strategies:

1. ID

In CSS, we can use “#” notation to select the “id” attribute of an element.

For WebElement “Offers”, tag name is “a” and id value is “offers”. Different syntaxes for CSS with Id are as follows:

Syntax:

driver.findElement(By.cssSelector(“<tagname>#<id value>”));

driver.findElement(By.cssSelector(“#<id value>”));

driver.findElement(By.cssSelector(“<tagname>[id=’<id value>’]”));

To locate the “Offers” tab on the BStackDemo application, the following are the CSS selectors with id.

driver.findElement(By.cssSelector("a#offers"));

driver.findElement(By.cssSelector("#offers"));

driver.findElement(By.cssSelector("a[id='offers']"));

2. Class

In CSS, we can use “.” notation to select the “class” attribute of an element.

For WebElement “BrowserStackDemo” home logo, tag name is “a” and class value is “Navbar_logo__26S5Y”. Different syntaxes for CSS with class are as follows:

Syntax:

driver.findElement(By.cssSelector(“<tagname>.<class value>”));

driver.findElement(By.cssSelector(“.<class value>”));

driver.findElement(By.cssSelector(“<tagname>[class=’<class value>’]”));

To locate “BrowserStackDemo” on the BStackDemo application, following are the CSS selectors with class.

driver.findElement(By.cssSelector("a.Navbar_logo__26S5Y"));

driver.findElement(By.cssSelector(".Navbar_logo__26S5Y"));

driver.findElement(By.cssSelector("a[class='Navbar_logo__26S5Y']"));

3. Attribute

Apart from “id” and “class”, other attributes can also be used to locate web elements using CSS selector.

For the WebElement “Favourites” tab, tag name is “a” and href value is “/favourites”.

Syntax:

driver.findElement(By.cssSelector(“<tagname>[href=’<href value>’]”));

To locate the “Favourites” tab on BStackDemo application, following is the CSS selector with href attribute.

driver.findElement(By.cssSelector("a[href='/favourites']"));

There are other attributes too such as name, placeholder, title, type, etc which can be used to locate elements using CSS selector.

4. Combining Attributes

From above examples we understood how we can uniquely identify elements using CSS selectors, however sometimes, using only class/ id/ single attribute does not yield a unique locator for a given web element. In such cases, we can combine multiple attributes to fetch a unique locator.

• Id and attribute example:

If we want to locate WebElement “Offers” tab by just one attribute “href”, it gives 2 results which means it is not unique and pointing to 2 web elements on DOM. To make it unique we should also use “id” attribute.

Syntax:

driver.findElement(By.cssSelector(“<tagname>#<id value>[href=’<href value>’]”));

driver.findElement(By.cssSelector("a#offers[href='/offers']"));

• Class and attribute Example:

If we want to locate the WebElement “Offers” tab by just class value, it gives 3 results, which means it is not unique and pointing to 3 web elements on DOM. To make it unique we should also use the “href” attribute.

Syntax:

driver.findElement(By.cssSelector(“<tagname>.<class value>[href=’<href value>’]”));

driver.findElement(By.cssSelector("a.Navbar_link__3Blki[href='/orders']"));

Talk to an Expert

5. SubString

CSS Selectors in Selenium allows to match a partial String with the help of various symbols to represent the start, end and contents inside a text. Let us understand all the three ways with example for accessing BrowserStack logo on BStackDemo web application.

• Matching a prefix (Starts with: ^): Locate the web element using the substring that starts with a certain value.

Syntax

driver.findElement(By.cssSelector(“<tagname>[<attribute>^=’prefix of the string’]”));

Example:

a[class^='Navbar_logo_']

The complete String here is “Navbar_logo__26S5Y” therefore only the start of the String i.e: “Navbar_logo_” is considered to locate the element.

• Matching a suffix (Ends with: $): Locate the web element using the substring that ends with a certain value.

Syntax:

driver.findElement(By.cssSelector(“<tagname>[<attribute>$=’suffix of the string’]”));

Example:

a[class$='26S5Y']

The complete String here is “Navbar_logo__26S5Y” therefore only the end of the String i.e: “26S5Y ” is considered to locate the element.

• Matching a substring (contains: *): Locate the web element by matching the substring.

Syntax:

driver.findElement(By.cssSelector(“<tagname>[<attribute>*=’substring’]”));

Example:

a[class*='logo_']

The complete String here is “Navbar_logo__26S5Y” therefore only a substring of the String i.e: “logo_ ” is considered to locate the element.

Sign up for Selenium Testing