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:
tagname = a
attribute = id(#), class(.)
If you input above text in console search, multiple results will pop up.
To rescue from the above anomaly, we can combine this CSS Selector with id.
Append value of id to above CSS selector, and it should yield unique value.
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.
Visit http://automationpractice.com/index.php and try to locate the WOMEN link using class.
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.
This CSS Selector will make the locator unique.
Using start-with in CSS Selector
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.
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.
Using ends-with in CSS Selector
Modify the above CSS Selector as follows:
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.
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:
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.