CSS Selector in Selenium | How to write effective CSS Selector easily

CSS Selector in Selenium

How to write CSS Selector in Selenium

In our previous posts, we learned various techniques of finding the locators including the infamous xpath. CSS Selector in Selenium is another locator identification technique which is very easy to use and relatively faster than xpath in execution. Similar to xpath, the CSS Selector has its own characteristics which are summarized below:

CSS Selector in Selenium
These are the basic building blocks to create CSS Selector, and most of the time you will end up using these only.
Assuming the demo site as https://www.wikipedia.org/ let’s try to understand all above CSS Selector properties.

class

Navigate to the demo website (preferably on chrome) and inspect the English link.
CSS Selector in Selenium
The HTML which contains this link can be segregated as:
tagname = a
attribute = id(#), class(.)
Using the above information let’s try to create a CSS Selector using attribute class.
a.link-box

If you input above text in console search, multiple results will pop up.

CSS Selector in Selenium

To rescue from the above anomaly, we can combine this CSS Selector with id.

id

Append value of id to above CSS selector, and it should yield unique value.

a.link-box#js-link-box-en

Though, in this example, we could have only used id and get a unique result.

Using tagname and attribute values

This is the lame version of above techniques. This method uses the traditional long syntax (as we saw in xpath) and is not easy to maintain.

CSS Selector in Selenium

Visit http://automationpractice.com/index.php and try to locate the WOMEN link using class.

a[class='sf-with-ul']

If you type above CSS selector on chrome console search, multiple results will be displayed for this selector. To narrow down our inspection, we will use this locator’s other property (attribute) title.

 

a[class='sf-with-ul'][title='Women']

This CSS Selector will make the locator unique.

Using start-with in CSS Selector

CSS Selector in Selenium

Consider following HTML code:

<button class="btn btn-default button button-medium exclusive" type="submit" id="SubmitCreate" name="SubmitCreate">
<button type="submit" id="SubmitLogin" name="SubmitLogin" class="button btn btn-default button-medium">

                            

This code is extracted from http://automationpractice.com (after clicking on Sign In link at home page) for two buttons- Sign In and Create an Account (highlighted in the image). Using start-with (^) technique we can get the locator reference without specifying attribute’s full value.

button[id^='Submit']

Above CSS Selector is the syntax to find a locator whose id starts with Submit. This CSS Selector will give 2 results, as another locator’s id also starts with Submit. Our aim is to write a CSS Selector for the first line of code.

We can use tagname and attribute values technique to make the locator unique.

button[id^='Submit'][name='SubmitCreate']

Using ends-with in CSS Selector

Modify the above CSS Selector as follows:

button[id^='Submit'][name$='Create']

Here we modified the name attribute to fetch the locator with name attribute ending with Create. Since there is no other locator ending with the name ‘Create‘, the above CSS Selector will yield a unique result.

Using contains in CSS Selector

Inspect the Contact Us link of the above web site.

CSS Selector in Selenium

The HTML code for this link has a title attribute with value Contact Us. Using contains approach of CSS Selector, we can specify the partial text of an attribute and the corresponding CSS Selector will return the locator or Web Element which contains this text.

For example, we can use below CSS Selector to identify Contact Us link:

a[title*='Contact']

If you use above CSS selector, you’ll get 2 results as there is one more Contact Us link at the bottom of the page. Take this as an exercise to write the CSS Selector for this web element to make it unique using the techniques used in this tutorial.

Author: Dhawal Joshi

A post-graduate in MCA, ISTQB & ITIL certified QA with more than 8 years of experience in QA working with a CMMI Level 5 organization as System Analyst. I started my automation journey with HP UFT(formerly known as QTP) and for the past few years, I am using Selenium for automation. I also have experience in Android Application Development, Java, HTML, and VBScript. When I am not working, I like to spend time with my family, cooking and learning new developments in IT.

1 thought on “CSS Selector in Selenium | How to write effective CSS Selector easily

Leave a Reply

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