CSS Selector In Selenium WebDriver: As an automation test engineer, you know the importance of the Locators in the Selenium WebDriver testing tool. In our previous post, we have discussed how we can locate an element using ID, Name, Class Name, Tag Name, Link Text, Partial Link Text. Those are very common attributes by using those you can easily identify a static element. Still, for handling or locate dynamic elements of a webpage, you can use two powerful location strategies like XPath and CSS Selector.
Read Also: XPath Locators in Selenium
For better understanding about XPath in detail, we have tried to cover all possible scenarios in a Separate post, and you can check that by following this link. But in this post, we are going to cover how to locate an element using the CSS Selector in detail with real-time examples.
What is CSS?
The full form of CSS is Cascading Style Sheets, which is a simple design language that is mainly developed to make the webpage presentable because CSS handles the looks and feels part of a web page.
Difference Between CSS Selector VS XPath
You can find Xpath and CSS selectors are the most used location strategy to locate the element on the webpage. But there is a strong competition going on discussion among which is more powerful between XPath and CSS Selector. But those are in favour of CSS selector they are mentioning that the CSS Selector is more acceptable due to the following reasons
- CSS is more readable (Simpler)
- CSS is faster (Especially IN IE)
and some are mentioning that By using XPath, you can traverse all the elements of a webpage wherein CSS selectors you can traverse only down to the DOM.
But in our point of view, it is better to master in both CSS selector and XPath.
CSS Selectors in Selenium
Let us discuss the different ways of identifying the elements using the CSS selector. Few basic keywords are used to locate elements like:
A dot (.) Operator Select the Class Selector
The Dot operator (.) represents a class in selenium, so by using the dot operator, you can identify web elements that are specified with the class attribute. For Example
<p class= “pages-sub-title”> Lambda Test blog post on validating CSS Selectors </p>
If you remember in Xpath for locating this element we can write the XPath like this //p[@class = ’value’] but in CSS we can have identified the same element by the following syntax:
Here “#” represents ID, which is used to locate the element which is specified with the ID attribute. Let’s take an example for better understand.
<li id="menu-item-143" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-143"> <a href="https://www.lambdatest.com/blog/category/lambdatest-updates/">Product Updates</a> </li>
If you can see the above example, then to locate in XPath, we can write this by //li[@id=’menu-item-143′], but for the same web element, we can write like this #menu-item-143.
When we see the page source of some web pages then we can see like below:
<div class="modal fade" id="whitepaper-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <span class="close" data-dismiss="modal" style="top: 4px; position: absolute; right: 10px;"> <span aria-hidden="true">×</span> </span>
Where you can see the above source code, you can find out some attributes are like key-value pairs, for example, ‘role = dialog,’ ‘data-dismiss = modal’ etc. For locating such web elements in XPath, we are writing the syntax like this tag name [@attribute key = ‘attribute value’ ].
The Same we can write in CSS Selector by like this
div[role=’dialog’] or [role=’dialog’]
As of now, we are discussing the simple ways to locate web element, let us go a little bit deeper and try to understand how we can more efficiently locate elements with the help of powerful querying technique such as:
- ^ indicated a prefix
- $ indicating suffix
- * indicating substring
If you observe, then you can find out these are much similar to the Xpath functions like starts-with, contains, and ends with. Let us start to understand by taking some real-world examples
^ indicated prefix
If the attribute value of an element is frequently changing, but the value starting a few characters are constant. Still, the rest of the characters are changing, and then, in that case, you can use the wild prefix character (^) for uniquely identify the element. the syntax is like below:
$ indicating suffix
Similarly, prefix if the last characters are constant, but the starting characters are changing, then to locate such an element, we can use the wild suffix character ($). the syntax looks like this:
* Indicating a substring match
Suppose you don’t have complete attribute details, or you have partial attribute value details in that case when we are using XPath that time we are using the contains() functions. Similarly, when we are using CSS selector at that time, we can use an asterisk (*) and the syntax looks like below:
At the time discussing Xpath, we have discussed how we can access the child elements with the help of the Axes concept. Similarly, here also some advanced techniques present to deal with the child and grandchild elements. That is:
- Direct Child
- Grand Child
- Nth Child
For locating an Immediate child of a node in Xpath, we are using ‘/,’ but in CSS, we can use the ‘>’ to identify the immediate child element.
CSS: div > a
Child or Grand Child Element Locate
If an element has child element or there are some grandchild elements are present then to locate those elements we are using “//”. for the same operation you can use the white space like below:
CSS: div a
When we are dealing with the table or ordered or unordered list this concept will be more helpful. Here N represents the number of the desired number element. Let us take a simple example to understand it:
<<ul id = “lambdaTestBrowsers”>
If you see the above code, you can find thats a list and from that, our requirement is to select the 2nd element from that list. We Can achieve that by following the below CSS Selector syntax:
There is another way to locate the second element and that is
Similarly, we can easily select the last element in the list by using this
<div id="123_randomId">123</div> <div id="randomId_456">456</div> <div id="123_pattern_randomId">789</div>
From the above list if we want to select the 123 elements then for that element the CSS value is
But based on the 123 elements how you can select the immediate element then you can use this
div[id^=’123_rand’] + div
Chain In CSS Selector:
<form class = "form-signin" role = "form" action = "/index.php" method = "post"> <h4 class = "form-signin-heading"></h4> <input type = "text" class = "form-control" id = "username" name = "username" placeholder = "username" required autofocus></br> <input type = "password" class = "form-control" id = "password" name = "password" placeholder = "password" required> <p> <button class = "btn btn-lg btn-primary btn-block radius" type = "submit" name = "login">Login</button> </form>
Here also by using multiple attributes, we can locate the elements, For that, we have taken the above example.
Attribute NOT contain a specific value
During testing a scenario where you don’t want to select which have some specific values in an attribute. in the above all scenarios we have to understand how you can select the elements based on the values but now we are going to understand how not to select by specific attribute value.
<div class="day past calendar-day-2017-02-13 calendar-dow-1 unavailable">123</div> <div class="day today calendar-day-2017-02-14 calendar-dow-2 unavailable">456</div> <div class="day calendar-day-2017-02-15 calendar-dow-3">789</div> <div class="day calendar-day-2017-02-16 calendar-dow-4">111</div>
In the above example, we don’t want to select those elements whose attribute value contains unavailable, So we can achieve that by like below:
add the rest of the things from here