CSS Selectors for Selenium Automation testers 

Using Selenium WebDriver whenever we want to automate a particular task we have to identify the UI Elements. Selenium WebDriver is providing built-in locators like By ID, Class Name, CSS Selectors, XPATH Selectors … In this article I am going to explain about the CSS Selectors.
First of all what is CSS?
Cascading Style Sheets is a language used to specify the visual appearance of a webpage. The main difference between HTML & CSS is, HTML is a mark-up language structure of a document for web distribution, where as CSS tells the browser how to it should look? (Like font style, back ground colour …). CSS can accomplish this by using CSS pattern matching rules, properties & values.
Syntax:
CSS pattern matching rules {Property: Value ;}
Example:
h1 {color: green;}
In the above example will make all the h1 tags to look in green colour.
In CSS, pattern-matching rules determine which style should be applied to elements in the DOM. These patterns, called CSS Selectors. If all conditions in the pattern are true for a certain element, the selector matches the element and the browser applies the defined style (Style is defined by properties & values) in CSS syntax.
Selenium WebDriver uses same principles of CSS selectors to locate elements in DOM. Selenium WebDriver’s By class provides the cssSelector () method for locating elements using CSS selectors. Let’s explore few of the CSS Selectors.
For examples purpose I am using the following HTML File

Default

<form name="loginForm"> <h1> Login Form</h1> <label title="username"> UserName:</label> <input type="text" id="input1"/> <label title="password">Password:</label> <input type="password" class="password" id="input2" /> <input type="password" class="password" id="input3" /> <input name="login" type="submit" value="Login" id="button1" /> </form>

1 2 3 4 5 6 7 8 9

<form name="loginForm"> <h1>Login Form</h1> <label title="username"> UserName:</label> <input type="text" id="input1"/> <label title="password">Password:</label> <input type="password" class="password" id="input2" /> <input type="password" class="password" id="input3" /> <input name="login" type="submit" value="Login" id="button1" /> </form>

Element Selectors:
In the style sheet, Element selectors are written using by the tag name. Element selectors also referred to as “type” selectors, select by matching elements (HTML tag name). The following line of code will identify the elements whose tag names matches to “input”.
IWebElement Element = Driver.FindElement(By.CssSelector("input"));
Class Selectors
In the style sheet, class selectors are written using the dot (“.”) preceding a custom name. Class selectors are extremely useful selectors that allow to add a class attribute to a given element in the mark-up, with a custom value. Then using that value preceded by a dot, write a corresponding rule using the class name.
The following line of code will identify the elements whose class name matches to “username”.
IWebElement Element = Driver.FindElement(By.CssSelector(".username"));
 ID Selectors:
In the style sheet, ID selectors are written using the hash “#”preceding a custom name. Since ID name can be used exactly one time in a DOM, ID’s are particularly useful in CSS layout when identifying significant portions of the document as they are unique.
The following line of code will identify the elements whose ID matches to “input1”.

IWebElement Element = Driver.FindElement(By.CssSelector("#input1"));
Attribute Selectors:
Apart from the class and id attributes, CSS selectors also enable the location of elements using other attributes of the element. In the following example, the Name attribute is used to locate an element whose tag name is “input” and having an attribute “name” of value “username”.
IWebElement Element = Driver.FindElement(By.CssSelector("[name=username]"));
There are four Attribute selectors available in CSS.

Attribute Selector	Pattern Matching	Example
[name^='ctrl']	Starting with	For example, if the name of an element is ctrl_12, this will locate and return elements with ctrl at the beginning of the name attribute.
[name$='word']	Ends with	For example, if the name of an element is password, this will locate and return elements with word at the end of the name attribute.
[name*='user']	Starting with	For example, if the name of an element is 1_username, this will locate and return elements that are containing user in the name attribute.

We can use ID as a attribute, which will be useful in case of dynamic controls in which ID’s will be generated by appending numbers. For example a particular element is having ID like this username_1_2345. In order to identify these kind of controls we can write selector as [ID^=username_1_].
Chaining of Selectors:
Till now we have seen basic selectors, we can chain those selectors in such a way we can identify the element uniquely in a much simpler way in complex DOM.
Few of chaining examples are listed in the below table.

Syntax	Description
*	Matches any Element
E	Matches all elements with tag name E
E C	Matches all elements with tag name E that are descendents of C
E>C	Matches all elements with tag name C that are direct descendents/children of E
E.C	Matches all elements E, that are having class name of C
E#i	Matches all elements E, that are having ID of i
E[a]	Matches all elements E, that are attribute of a, of any value
E[a=v]	Matches all elements E, that are attribute of a, of value v
E[a^=v]	Matches all elements E, that are attribute of a, whose value starts with v
E[a$=v]	Matches all elements E, that are attribute of a, whose value ends with v
E[a*=v]	Matches all elements E, that are attribute of a, whose value contains v