Locating elements using CSS selectors

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language such as HTML or XML.

Major browsers implement CSS parsing engines for formatting or styling the pages using CSS syntax. CSS was introduced to keep the presentation information separate from the markup or content. For more information on CSS and CSS selectors, visit http://en.wikipedia.org/wiki/Cascading_Style_Sheets.

In CSS, pattern-matching rules determine which style should be applied to elements in the DOM. These patterns, called selectors, may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element and the browser applies the defined style in CSS syntax.

Selenium WebDriver uses same principles of CSS selectors to locate elements in DOM. This is a much faster and more reliable way to locate the elements when compared with XPaths.

In this recipe, we will explore some basic CSS selectors and then later on we will dive into advanced CSS selectors.

How to do it...

Let's explore some basic CSS selectors that can be used in Selenium WebDriver. Selenium WebDriver's By class provides the cssSelector() method for locating elements using CSS selectors.

Finding elements with absolute path

CSS absolute paths refer to the very specific location of the element considering its complete hierarchy in the DOM. Here is an example where the Username Input field is located using the absolute path. While providing absolute path, a space is given between the elements.

WebElement userName = driver.findElement(By.cssSelector("html body div div form input"));

You can also use the previous selector in the following way by describing the direct parent to child relationships with > separator:

WebElement userName = driver.findElement(By.cssSelector("html > body > div > div > form > input"));

However, this strategy has limitations as it depends on the structure or hierarchy of the elements on a page. If this changes, the locator will fail to find the element.

Finding elements with relative path

With relative path we can locate an element directly, irrespective of its location in the DOM. For example, we can locate the Username Input field in the following way, assuming it is the first <input> element in the DOM:

WebElement userName = driver.findElement(By.cssSelector("input"));

The following CSS selectors use the Class and ID attributes to locate the elements using relative paths. This is same as the className() and id() locator methods. However, there is another strategy where we can use any other attribute of the element that is not covered in the By class.

Finding elements using the Class selector

While finding elements using the CSS selector, we can use the Class attribute to locate an element. This can be done by specifying the type of HTML tag, then adding a dot followed by the value of the class attribute in the following way:

WebElement loginButton = driver.findElement(By.cssSelector("input.login"));

This will find the Login button's <input> tag whose Class attribute is login.

There is also a shortcut where you can put a . and class attribute value and ignore the HTML tag. However, this will return all the elements with class as login and the test may not return the correct element.

WebElement loginButton = driver.findElement(By.cssSelector(".login"));

This method is similar to the className() locator method.

Finding elements using ID selector

We can locate the element using the IDs assigned to elements. This can be done by specifying the type of HTML tag, then entering a hash followed by the value of the Class attribute, as shown:

WebElement userName = driver.findElement(By.cssSelector("input#username"));

This will return the username <input> element using its id attribute.

There is also a shortcut where you can enter # and a class attribute value and ignore the HTML tag. However, this will return all the elements with the id set as username and the test may not return the correct element. This has to be used very carefully.

WebElement userName = driver.findElement(By.cssSelector("#username"));

This method is similar to the id locator strategy.

Finding elements using attributes selector

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 <input> element.

WebElement userName = driver.findElement(By.cssSelector("input[name=username]"));

Using the name attribute to locate an element is similar to the name() locator method of the By class.

Let's use some other attribute to locate an element. In the following example, the <img> element is located by using its alt attribute.

WebElement previousButton = driver.findElement(By.cssSelector("img[alt='Previous']"));

You might come across situations where one attribute may not be sufficient to locate an element and you need to combine additional attributes for a precise match. In the following example, multiple attributes are used to locate the Login button's <input> element:

WebElement previousButton = driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));

Finding elements using Attributes Name Selector

This strategy is a bit different from the earlier strategy where we want to locate elements based on only the specific attribute defined for them but not attribute values. For example, we want to lookup all the <img> elements which have alt attribute specified.

List<WebElement> imagesWithAlt = driver.findElements(By.cssSelector("img[alt]"));

A Boolean not()pseudo-class can also be used to locate elements not matching the specified criteria. For example, to locate all the <img> elements that do not have the alt attribute, the following method can be used:

List<WebElement> imagesWithoutAlt = driver.findElements(By.cssSelector("img:not([alt])"));

Performing partial match on attribute values

CSS selector provides a way to locate elements matching partial attribute values. This is very useful for testing applications where attribute values are dynamically assigned and change every time a page is requested. For example, ASP.NET applications exhibit this kind of behavior, where IDs are generated dynamically. The following table explains the use of CSS partial match syntax:

Syntax	Example	Description
^=	input[id^='ctrl']	Starting with: For example, if the ID of an element is ctrl_12, this will locate and return elements with ctrl at the beginning of the ID.
$=	input[id$='_userName']	Ending with: For example, if the ID for an element is a_1_userName, this will locate and return elements with _userName at the end of the ID.
*=	Input[id*='userName']	Containing: For example, if the ID of an element is panel_login_userName_textfield, this will use the userName part in the middle to match and locate the element.

How it works...

CSS selector is a pattern and the part of a CSS rule that matches a set of elements in an HTML or XML document.

The majority of browsers support CSS parsing for applying styles to these elements. Selenium WebDriver uses CSS parsing engine to locate the elements on a page. CSS selectors provide various methods, rules, and patterns to locate the element from a page. This is also a more reliable and fast method when compared with XPath locators.

Using CSS selector, the test can locate elements in multiple ways using Class, ID, attribute values, and text contents as described in this recipe.

See also

• The Locating elements using advanced CSS selectors recipe