CSS Selector in Selenium WebDriver
CSS Selector in Selenium Web Driver will describe the importance of the CSS Selector in Selenium automation.It is very common that when you want to automate any application the most important thing is to identify the element to interact with it. Particularly when you using Selenium as your automation tool, explicitly you have to identify the element on web page. There are so many ways to identify the elements in Selenium and those are called locators. One of the most used, popular and fastest locators is CSS Selector.
CSS Selector is a way of identifying the element on web page. In simple words, finding address of an element on the web page. You can use so many ways to identify the element using CSS Selector.
Using CSS is best practice when you compare to XPath. The advantages of CSS over XPath are:
- CSS Selector will not change browser to browser as XPath will change.
- CSS is native to browsers and XPath is not
- XPath can traverse up the document from a child element to parents.
- XPath engines are different in each browser, hence make them inconsistent
- IE does not have a native xpath engine, therefore selenium injects its own xpath engine for compatibility of its API. Hence we lose the advantage of using native browser features that WebDriver inherently promotes.
However there are some situations where, you need to use XPath and that will depend on the application.
By using below methods we can identify the elements uniquely.
- TagName
- Id
- ClassName
- Attributes
- Contains
- Starts-with
- Ends With
TagName:
Using tag name we can identify the element. But it will locate so many elements on the web page as page may have same tags in many places. So, it will not locate the element uniquely. This is not a good practice to use the tag name individually to locate the element.
Example:
input
In the above image, the input tag highlighted/located 15 elements. So, tag name may not useful while identifying the element uniquely.
ID:
ID is an attribute to the element or tag to describe what kind of element that is. IDs are unique. If you want to use ID as locator then need to use ‘#’ symbol in front of ID.
#IDValue
Example:
#optionsRadiosInline1
In the above example, only one element highlighted using ID. # is mandatory to identify the element using ID.
Class Name:
Class is also an attribute to the element to apply the styles to that tag/element. Class names are not unique. So, if use these; it locate so many elements which are using the same class. If you want to locate an element using class name use any other attributes as extra parameters to identify the element uniquely.
If you want to use Class Name as locator then need to use ‘.’(i.e. dot) symbol in front of class name.
.className
Example:
.radio-inline
In the above example, 2 elements highlighted using className. . (dot) is mandatory to identify the element using class name
Attributes:
As class Names are not unique, need to use the other attribute values along with class name to identify element uniquely.
Sometimes single attribute is enough to identify, but some times it will not suffice to identify the element then we will use multiple attributes to identify the element uniquely.
Single Attribute:
tagName[attribute = ‘attributeValue’]
Example:
input[placeholder=’First name’]
Multiple Attributes:
tagName[attribute1=’attributeValue1’][attribute2=’attributeValue2’]
Example:
input[type=’text’][placeholder=’First name’]
Contains:
We can use contains method to identify the element. Need to use ‘*’ (i.e. Star) symbol to identify the element.
tagName[attribute*=’partialAttributeValue’]
Example:
input[placeholder*=’First’]
Starts With:
We can use startswith method to identify the element. Need to use ‘^’(i.e Cap) symbol to identify the element.
tagName[attribute^=’attributeStartingValue’]
Example:
input[name^=’first’]
Ends With:
We can use endswith method to identify the element. Need to use ‘$’(i.e Dollar) symbol to identify the element.
tagName[attribute$=’attributeStartingValue’]
Example:
input[name$=’rstName’]
Conclusion:
Here the conclusion is, need to identify the element uniquely on the web page to interact with exactly. The above are the only examples to demonstrate. Those CSS will vary depends on the application and how the HTML is written.
Please watch the youtube video for better understanding.
