Identifying UI elements using CSS locators

Locating UI elements by name/id/link text is certainly the most simplest way of locator identification. But not all HTML elements within a page are defined by an id or name. For such situations where the user is unable to locate using the id or name locator strategies we use the CSS locator strategy.

CSS (cascading style sheets) is a style sheet language used for describing the rendering of documents written in mark-up languages such as HTML and XML. The CSS locator strategy uses the CSS selectors for finding the UI elements. Selenium supports CSS 1.0, CSS 2.0 and CSS 3.0 selectors. Although compared to the name and id locator strategies CSS locators are more complex to form, they can be used to locate even the most complicated objects within an HTML document. Also CSS locators are much faster compared to xPath locators. Owing to these reasons majority of selenium users recommend CSS as the most appropriate locating strategy of their choice.

There are numerous formats for creating the CSS locators. We shall focus on the most common ones. For demonstrating the usage of CSS locators we shall use wikipedia’s login screen as an example.

CSS locator using tag and ID

This CSS locator strategy is employed when the id attribute for a particular HTML tag is available.

Syntax	Description
css=tag#id	tag - HTML tag of element used # - used for CSS selector with ID id - ID of the element used

We shall try to locate the username text box. Using firebug it can be found that the HTML tag is “input” and id is “wpName”.

So according to syntax the locator will be “css=input#wpName1”. Place this in the IDE target field to locate the element on the web page.

CSS locator using tag and class

This CSS locator strategy is employed when the class attribute for a particular HTML tag is available.

Syntax	Description
css=tag.class	tag - HTML tag of element used . - used for CSS selector with class class – class of the element used

We shall try to locate the username text box this time using the tag and class css strategy. Using firebug it can be found that the HTML tag is “input” and class is “loginText”.

So according to syntax the locator will be “css=input#loginText”. Place this in the IDE target field to locate the element on the web page.

CSS locator using tag and any attribute

This strategy can be used to identify elements using any attribute an HTML tag.

Syntax	Description
css=tag[attribute=value]	tag - HTML tag of element used attribute - attribute to be used value - the value of the corresponding attribute

This time we shall try to locate the username text box by using an attribute other than id or class. Using firebug it can be found that for the HTML tag “input” we have an attribute “name” having value “wpName”.

So according to syntax the locator will be “css=input[name=wpName]”. Place this in the IDE target field to locate the element on the web page.

TIP: UI elements can be located using CSS locators using multiple attributes by specifying the multiple attributes in the format “css=tag[attribute1=value1][attribute2=value2]. For example the username text box can be located using both the id and class attribute in the format:
“css=input[id=wpName1][class=loginText]”

CSS locator using inner text

This strategy is used to find elements using their inner text which are the HTML labels displayed directly on a web page.

Syntax	Description
css=tag:contains(“innerText”)	tag - HTML tag of element used inner text- the inner text of the element

For demonstrating this we shall try to locate the “Username” label present on the page. Using firebug it can be found that the inner text of the “label” tag present is “Username”.

So according to syntax the locator will be “css=label:contains(Username)”. Place this in the IDE target field to locate the element on the web page.

Tags: CSS,locators,firebug,selenium ide