logo logo

CSS Selectors You Need to Know: Cheat Sheet

CSS Selectors You Need to Know: Cheat Sheet

This article covers some of the most important CSS selectors for Selenium WebDriver, explaining the syntax and how to identify web elements. At the end of the post, you can find a downloadable CSS selectors cheat sheet 🤩

Table of Content

What are CSS selectors?

CSS selector is one of the best locator strategies for elements. Similar to XPath, it works when we don’t have unique IDs, names, or class names. The way CSS selectors work is by identifying the elements based on an attribute and its value. Chrome’s developer tools for example can help you get an element’s CSS selector, by right-click -> Copy -> Selector:

CSS Selectors from Dev Tools

While in the Developer Tools, Elements tab, you can use the Search option to filter based on CSS selectors, and the console will highlight all the matching elements.

CSS selectors vs XPath

In my opinion, it’s not really a matter of one being better than the other. There will be cases where you prefer to use XPath instead of CSS selectors, and cases where you prefer CSS selectors instead of XPath. You can choose multiple locator strategies in the same test, depending on what works on the specific elements you want to interact with.

However, it’s considered that XPath is more computer-readable, while CSS selectors are easier to read by us humans.

There are some CSS selectors which can be easily translated to XPath since both types of locators allow identifying elements based on custom attributes and values, as well as finding child or descendant elements.

At the same time, you will see that some of the selectors explained in this article (such as visited links, or enabled elements) do not have an equivalent in XPath, so the only way to locate elements will be using a CSS selector.

On the other hand, XPath allows identifying parents and ancestors, which is not allowed in CSS.

Retrieving CSS selectors with TestProject

Whether you are writing your own test code, or have recorded tests, you can use the TestProject for element identification.

In recorder mode, you can highlight an element, click ‘double-shift’ (or on the three dots menu) to freeze the element, and hover the Attributes menu item:

TestProject CSS Selectors

From the last menu, you can see the element’s attributes, and you can also opt to save the element. TestProject will automatically generate the correct XPaths and CSS Selectors for the element. You can also copy to clipboard any other attribute value if you want to build your own, more specific, locators.

How to use CSS selectors in your Selenium tests

Selenium allows us to locate elements by various strategies, but right now we’ll focus just on CSS selectors. The important thing to note is that if we try to locate a specific element, we have to be sure that the locator is unique, otherwise our tests will simply interact with the first element that matches the provided locator. On the other hand, there will be cases where we want to identify all the elements with a shared trait (for example, all links with class “product”).

In Selenium WebDriver, both scenarios can be easily achieved.

To interact with a single element, we will use the findElement() method, like this (the example is in Java, but the principle is the same in all programming languages):

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

This means that the (first) element that matches our locator will be the one returned by this line of code.

For multiple elements, we have the findElements() method (pretty intuitive, right? 😊):

driver.findElements(By.cssSelector("input:checked"));

This method will look for ALL elements that match the given CSS selector.

Types of CSS selectors

Let’s discuss the types of selectors in detail:

  • CSS simple selectors- Using Simple selectors you can identify elements based on simple attributes like id attribute and class attribute.
  • CSS pseudo class selectors-Using pseudo class selector you can identify elements based on locations or positions or indexes.
  • CSS combinator selectors – It defines the relationship between elements in the HTML page.
  • CSS Attribute selectors – It helps in finding the element based on attribute and attribute values.

CSS selectors cheat sheet

OK, now that we know how to use and obtain some CSS selectors, let’s look at a cheat sheet, which will go through most selectors. You’ll find examples and explanations for each of the selectors.

Basic CSS selectors

These are the most common selectors you will probably use. They relate directly to either an id, a class name, or an element’s attribute. The syntax is rather simple (all items are optional here, but can be combined in any number):

  • The element type (e.g. button, input); if left empty, the selector will match any element type.
  • The id, preceded by the # (number sign) character.
  • The class, preceded by the . (dot) character.
  • (custom) attributes and their values, written between square brackets.

As is the case with all locators, make sure they are unique if you are trying to identify a single element.

CSS Selector Example Explanation
Id #name Locates any element with the id “name”
input#name Locates elements of input type with the id “name”
Class .btn Locates any element with the class “btn”
button.btn Locates elements of button type with the class “btn”
.btn.btn-primary Locates any element with both “btn” and “btn-primary” classes. This is particularly useful for elements we can only identify through multiple classes, because in these cases we cannot use the Selenium locator ClassName
Attribute [name=’submit’] Locates any element with the “submit” name. Any attribute can be used in place of the name.
button[name=’submit’] Locates button elements with the “submit” name.
[id=’password’][placeholder=’Enter your password’] Locates elements with id value “password” and with the placeholder value “Enter your password”

Sub-strings

CSS selectors allow us to also filter based on sub-strings. So in addition to the examples above, where we use exact values for ID, class, or attribute, we can also use just part of the text of the attribute:

CSS Selector Example Explanation
Begins with [placeholder^=’Enter’] Locates elements with placeholder value starting with the string “Enter”
Ends with [placeholder$=’password’] Locates elements with placeholder value ending with the string “password”
Contains [placeholder~=’password’] Locates elements with placeholder value containing the string “password”
[placeholder*=’password’] Locates elements with placeholder value containing the string “password”

Hierarchy

As you probably know already, the HTML code has a tree structure, so the relationship between its elements is parent-child (vertically) and sibling (horizontally). Based on this, we can use CSS selectors to locate elements based on their parents, ancestors, and siblings.

CSS Selector Example Explanation
Child div > input Locates input elements that are direct descendants of a div element
Descendant form input Locates input elements that are descendants of a form element (on any level, the form does not need to necessarily be a parent)
First child div button:first-child Locates the first child of a div element
nth-child div button:nth-of-type(2) Locates the second button child of a div element
div button:nth-child(2) Locates the second child of a div element, which is a button element
Last child div button:last-child Locates the last child of a div element
Sibling h1 ~ p Locates the p elements that follow an h1 element
Next sibling h1 + p Locates the p elements that follow directly after an h1 element (it doesn’t just have to be the first p element, but the immediate sibling)

Other attributes

You can also identify elements based on some specific characteristics, which are preceded by the : (semi-colon) character. Let’s check some of them below:

CSS Selector Example Explanation
Unvisited links a:link Locates unvisited links
Visited links a:visited Locates visited links
Enabled elements button:enabled Locates enabled buttons
Disabled elements button:disabled Locates disabled buttons
Focused elements input:focus Locates the input element which has the focus
Checked check-box input:checked Locates the input elements which are checked
Read-only elements input:read-only Locates the read-only input elements
Mandatory elements input:required Locates the input elements which are required

Advantages of using CSS selectors

  • CSS selectors are a great alternative for elements that don’t have unique IDs, or the IDs are dynamic and cannot be hard-coded in the tests.
  • They allow identifying elements based on custom attributes, that are specific to your application, without always relying on IDs and classes.
  • A great advantage for locating elements by class name using CSS selectors is that you can locate an element by multiple classes (which cannot be achieved by Selenium when using the find by class methods).
  • The elements can be identified by any combinations of their attributes and the values of the attributes, including partial matches, and even hierarchical relations with other elements
  • You can mix multiple attributes of the same element.

FAQs

  1. What are the limitations of CSS selectors?

    CSS can’t fulfill turning completeness hence, it can never perform logically like ‘if/else’, for/while, etc, or arithmetical tasks. One cannot read files using CSS. It cannot provide total control over document display and allows the contents of the page to come through whatever the browser is used.
  2. What is the usage of CSS selector? 

    The class selector is a way to select all of the elements with the specified class name and apply styles to each of the matching elements. The selector must start with a period ( . ) and then the class name. The browser will look for all tags on the page that have a class attribute containing that class name.

  3. What are group selectors in CSS? 

    The CSS grouping selector is used to select multiple elements and style them together. This reduces the code and extra effort to declare common styles for each element. To group selectors, each selector is separated by a space.

  4. What is a CSS selector in selenium? 

    CSS Selectors in Selenium are string patterns used to identify an element based on a combination of HTML tag, id, class, and attributes.

Conclusions [+Downloadable Cheat Sheet]

The CSS selector is one of the most versatile locator strategies for identifying web elements when working with Selenium.

👉 Download the cheat sheet of the CSS selectors presented in the article here 👈
Hope you enjoy it! ✨

About the author

Andreea Draniceanu

Andreea is a QA engineer, experienced in web and desktop applications, and always looking to improve her automation skills and knowledge. Her current focus is automation testing with C#.

Leave a Reply

FacebookLinkedInTwitterEmail