Object identification using CSS selectors in Selenium

In the previous post, we have seen how to locate elements in HTML document using XPATH. In this post, we will see how to perform Object identification using CSS selectors in Selenium.

CSS selectors are considered faster and simpler than XPATH, but then again it depends individual is comfortable  with which locators XPATH or CSS.

It also traverse through node hierarchy like XPATH but its syntax will be bit different. We will how different it is from XPATH.

CSS stands for ‘Cascading Style Sheets’ and are used for styling the webpages like coloring,alignment etc.

Its syntax:

tagName[attributename=attributeValue]

It can also contains a combination of attributes and value like XPATH as shown in e.g. 2 below.

Example of CSS:

e.g. 1 : input[id=firstname] e.g. 2: input[name=firstname][type=text]

 

In CSS, the attribute id is represented by a hash(#) and class attribute is represented by a dot(.). Let’s understand them with example.

We have create a simple demo application to understand CSS selectors. You can copy the below code in a notepad and save it with extension .html.


Hash (#) represents id attribute: You can also use Firebug and Firepath to generate CSS selector. But sometimes tool generated CSS is not sufficient to fulfill our requirement. That’s why we should know how to build our own CSS selectors.

We have an id attribute for input boxes First name and Last name. Now, suppose we want to select the ‘First Name’ with the help of CSS selector.

How to write CSS with id attribute?

e.g. We can write it like   #fn123.

In the Fi 1.0, you can see that we have selected CSS in the Firepath tool and tried to locate the element (First Name) with the help of CSS (#fn123). 

id attribute in CSS selector

Fig 1.0


 

dot(.) represent the class attribute: We can use the class attribute to locate the element and for creating CSS for this, we need to use dot(.) which represent class.

Syntax : .classattribute

e.g.  We want to locate the radio button which are having the class attribute. For that CSS will be .r1.

Class attribute in CSS

Fig 1.1


 

How to make CSS if there is a Direct child of any node?

Direct path in xpath is represented by a slash(/), but in CSS it is represented by “>”.

To find the both input node(radio buttons) under span tag:

XPATH: html/body/span/input

CSS : html >body> Span > input


 

Making a CSS like relative XPATH for selecting all the input nodes:

If we want to locate any element at any position in the middle of document , then XPATH uses a double slash(//) but CSS uses a whitespace. Let’s see with an example.

To find out input tags under body tag:

XPATH : //body//input

CSS : body input

Relative CSS

Fig 1.2


 

How to select the next sibling?

Suppose, we want to locate the ‘Submit’ button which comes after ‘Last Name’.Let’s create CSS for this.

input#ln123 + input

First we have located last name by using its id (input#ln123) and then we have used (+) to locate the next sibling.


 

How to locate element with starting part of the its attribute value?

It is similar as we have seen for XPATH starts-with. In CSS, we use “^” to match starting text of String. Suppose, we need to locate element First Name whose id value is dynamic. That means its first part (fn) is constant but remaining text (123) might get changed. In this case, better way to create CSS by using  “^” .

input[id^=’fn’]

 

How to locate element with ending  part of the its attribute value?

For verifying end part, we can use dolor sign ‘$’.

input[id$=’123′]

It will identify both First Name and Last Name because both’s id are ending with the text ‘123’.


 

How to verify if element contains a particular text ?

A “*” symbol represents if String contains particular text defined.

input[id*=’ln’]

The above CSS will identify the Last Name because its id contains a part ‘ln’.

Contains in CSS

Fig 1.3


 

Use of :nth-child(n): Select element that is second child of it parent. As Last name is the second child of input type. Let’s select this.

input:nth-child(2)
nth child in CSS

Fig 1.4


 

Use of only-child: It selects the element which is only child of it parent.In our application , both radio button are only child of parent Span tag. So , by using this in CSS expression we can select the radio button.

input:only-child
Only child in CSS

Fig 1.5


How to get CSS path using Chrome browser?

This has already been explained in XPATH post.You can refer this.

Ask Question
Have any question or suggestion for us?Please feel free to post in  Q&A Forum
Object identification using xpath in Selenium
Introduction to Selenium WebDriver and Comparison with Selenium RC
Shekhar Sharma

Shekhar Sharma

Shekhar Sharma is founder of testingpool.com. He is an automation engineer having more than 8 years of experience who loves troubleshooting in automation and finding innovative ways to solve the problems. His other leisurely activities includes playing harmonica, paintings, sketching portrait, watching movies and travelling etc.

You may also like...

1 Response

  1. August 15, 2015

    […] get the XPATH or CSS , we can directly right click on the inspected element and copy the XPATH or CSS which ever is […]

Leave a Reply

Your email address will not be published. Required fields are marked *