A Quick Introduction to CSS Locators in Selenium

While writing my recent posts on alternate locators, locator builders and Seleninum plugin API, I skipped over a truely basic question. What is a CSS locator in Selenium? It seems that some people are still looking for the answer(tm)!

As you already know, a Selenese command is usually made up of three parts, viz., the comand, the target and the value. A target part specifies a locator, which is a means of identifying an element for the Selenium command. The locator often takes the form locatorStrategy=locatorExpression. Selenium supports many different locator strategies including identifier, id, name, xpath, link, dom, css and can be extended with many more. Take a quick look at the locating elements part of the official Selenium documentation for really useful information. The Selenium team has done a great job in putting together a really good reference. Well done! I have digressed, back to the main question. A CSS locator is a locator using CSS selectors. Here is a quick example of how just the locator looks like:-

css=#linktolocatordocs

A click Selenese command using this locator will look something like this:-

click       css=#linktolocatordocs

I have used some whitespace to separate the command from the locator. The css= prefix specifies that we are using CSS selectors as the locator strategy. The #linktolocatordocs is the actual CSS selector used to locate the element, in this case, the element with the id attribute equal to linktolocatordocs.

The CSS selectors, as they are commonly known, are patterns that can be used for identifying one or more elements in the web page. The CSS selectors got popular with CSS (Cascading Style Sheets) used to provide style rules for the web page. These style rules are used to design web pages and can be as simple as make all headings big and bold in red colour and use the CSS selectors to choose the elements in the web page to apply these rules to. These CSS selectors can now be used for HTML as well as XML and is a proposed recommendation by W3C. You can get the full document with all the details straight from the W3c website here.

Here are a couple of more selectors that I find useful in addition to the id selector (hash followed by the id) introduced above.

Elements having the class attribute (dot followed by the class):

.hidden

The class attribute is a special attribute and can contain a list of whitespace separated values. The .hidden selector says that one of these values should match the value hidden. A thing to note that the id of an element is unique, but you can have more than one element having the same class. It is a common mistake to assume that class is always unique.

Elements having an attribute with a given value (attribute=value in square brackets):

*[src="http://reallysimplethoughts.com/logo.png"]

The * specifies that it can be any element and the src=”…” specifies that the src attribute should match the value given. Since the IMG tags are the image tags, a more accurate version would be specifying the IMG tags only, like the following:-

IMG[src="http://reallysimplethoughts.com/logo.png"]

This says that only the IMG tags that have the src attribute matching the given value should be selected. You can specify any tag type you need instead of IMG. Simple! Isn’t it? Don’t forget that when you use them with Selenium, you will need the css= prefix.

Sauce Labs has a nice short tip about CSS Selectors: CSS Selectors in Selenium Demystified.

The Selectutorial – CSS selectors at Max Design, aimed mostly at Web Site designers, is also useful.

The Selectors Level 3 proposed recommendation by W3C mentioned above is probably the best reference out there but can take a while to comprehend completely.