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 selectors vs XPath
- Retrieving CSS selectors with TestProject
- How to use CSS selectors in your Selenium tests
- Types of CSS selectors
- CSS selectors cheat sheet
- Advantages of using CSS selectors
- FAQs
- Conclusions [+Downloadable Cheat Sheet]
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:
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:
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
- 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. - 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.
- 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.
- 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! ✨