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:-
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):
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):
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:-
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.