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:
It can also contains a combination of attributes and value like XPATH as shown in e.g. 2 below.
Example of CSS:
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.
<!DOCTYPE html> <html> <body> <input id="fn123" type="text" name="first1234" placeholder="First Name"> <input id="ln123" type="text" name="lastname" placeholder="Last Name"> <input type="submit"> <span>Male <input class="r1" type="radio" name="sex" value="male" checked> </span> <span>Female <input class="r1" type="radio" name="sex" value="female" checked> </span> </body> </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).
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.
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
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.
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 “^” .
How to locate element with ending part of the its attribute value?
For verifying end part, we can use dolor sign ‘$’.
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.
The above CSS will identify the Last Name because its id contains a part ‘ln’.
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.
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.
Fig 1.5
How to get CSS path using Chrome browser?
This has already been explained in XPATH post.You can refer this.
1 Response
[…] get the XPATH or CSS , we can directly right click on the inspected element and copy the XPATH or CSS which ever is […]