App & Browser Testing Made Easy

Give your users a seamless experience by testing on 3000+ real devices and browsers. Don't compromise with emulators and simulators

Home Guide CSS Selector in Selenium: Locate Elements with Examples

CSS Selector in Selenium: Locate Elements with Examples

By Sonal Dwivedi & Shreya Bose, Community Contributors -

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.

CSS Selectors in Selenium ID

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.

Class CSS Selectors in Selenium

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.

Attribute CSS Selectors

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.

ID and attribute in CSS Selectors

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.

class and attribute CSS Selectors

Syntax:

driver.findElement(By.cssSelector(“<tagname>.<class value>[href=’<href value>’]”));
driver.findElement(By.cssSelector("a.Navbar_link__3Blki[href='/orders']"));

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.

 

Prefix in Substring CSS SelectorsSyntax

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.

ends with Dollar CSS SelectorsSyntax:

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.

substring CSS Selectors

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

CSS Selector in Selenium: Locate Elements with Examples

Tags
Automation Testing Selenium Webdriver

Featured Articles

CSS Selectors Cheat Sheet (Basic & Advanced)

How to Create Browser Specific CSS Code

Curated for all your Testing Needs

Actionable Insights, Tips, & Tutorials delivered in your Inbox
By subscribing , you agree to our Privacy Policy.
thank you illustration

Thank you for Subscribing!

Expect a curated list of guides shortly.