Hello Folks,
We have seen all locators except CSS Selectors in old posts. You can find links of old posts below:
ID Locator
name, className, linkText, PartialLinkText, tagName Locators
Xpath Basic concepts
Xpath Advanced Concepts
We will cover CSS Selector in this post. We will see below topics:
- What is CSS?
- What is CSS Selectors?
- Different ways of writing CSS Selectors.
- CSS stands for Cascading Style Sheets.
- CSS is a language that describes the style of an HTML document.
- CSS describes look and feel of HTML elements(font size, width, height etc) i.e. how should it be displayed.
- It provides special and easy ways to specify various properties to HTML element. We can specify several style properties for a HTML element.
For Example:
Hey, There!!
Each attribute has a name and a value, separated by a colon (:). Each property declaration is separated by a semi-colon (;). In above example, bold texts are CSS properties.
CSS Selectors are patterns which is used to select the element which developers want to style.
For example:
div#FirstName{color:green;}
In above statement, first element will be located whose id is “FirstName” and then text of element will be set to green.
In same style, Selenium tester use CSS Selectors to locate web elements and perform actions on them like typing, clicking etc.
CSS Syntax:
- tagName[attributeName=’attributeValue’] :- To locate web elements with specified tag and attribute name and its value.
- [attributeName=’attributeValue’]: To locate web elements with any tag but has specified attribute name and its value.
Consider below HTML code:
CSS Selectors Examples:
input[id=’inputValEnter’]
input[name=’keyword’]
It is similar to XPath, Just we do not use slash and @ symbol.
XPath: //input[id=’inputValEnter’]
CSS: input[id=’inputValEnter’]
CSS selector provides a direct way to locate a web element which has ID as an attribute.
CSS syntax:
a. tagName#IDValue (To find web element with specified tag and ID).
b. #IDValue(To find web element which has specified ID as an attribute)
Example:
Consider below HTML code:
CSS Selectors Examples:
input#inputValEnter :-> All input nodes which has id value as “inputValEnter”.
#inputValEnter:-> Any nodes which has id value as “inputValEnter”.
CSS selector provides a direct way to locate a web element which has class as an attribute.
CSS syntax:
a. tagName.IDValue (To find a web element with specified tag and class value).
b. .IDValue(To find all web element which has specified class as an attribute)
Example:
Consider below HTML code:
CSS Selectors Examples:
input.searchValue: ->All input nodes which has class value as “searchValue”.
.searchValue:->Any nodes which has class value as “searchValue”.
CSS Syntax: Parent node > Child node
A direct child is immediate child of father. We use single slash (/) in XPath for immediate child. In CSS we use arrow (>) symbol to locate immediate child.
Example:
Consider below html:
CSS Selectors Examples:
In above example, parent “ul” has two direct children “li”.
- ul>li :- It will give you both children of ul.
- ul#DemoList > li : It will search for ul which has specified ID and then will go for direct li child of ul.
An indirect child of a father will be child of its child like grandson. In XPath we locate any direct or indirect child of parent using double slash(//). In CSS, we use white space.
CSS syntax: tagName tagName
Example:
Consider below example:
CSS Selectors Examples:
- ul li :-> All direct and indirect li children of ul. It will locate four li. Two from first ul and two from second ul.
- ul#Demo1List li :-> It will locate ul first which has id “Demo1List” and then locate all direct and indirect li children of ul .
- ul#Demo2List li :->It will locate ul first which has id “Demo2List” and then locate direct and indirect li children of ul .
It means nth child of parent. Remember it is not exact similar to grouping as in XPath. It is to select nth child of a parent not from a group.
CSS Syntax: tagName:nth-child(n)
Example:
In above HTML code, div is first child and
CSS Selector Examples:
- ul#TrainTicketTypes li:nth-child(2) :-> Locate a ul which has id as “TrainTicketTypes ” then go to li if it is second child of ul. You must understand that it is not second li child.
- ul#TrainTicketTypes div:nth-child(1): Following same above concept, it will return first child i.e. div.
7. Using + operator to locate next sibling of a sibling:
It can be used to locate adjacent sibling of a sibling. Follow the dictionary meaning of sibling.
CSS Syntax: tagName +tagName
Example:
CSS Selectors Examples:
- div + li :-> Immediate adjacent li sibling of div. It will locate Tatkal as it is only adjacent. It will not locate remaining two li.
- div.searchContainer + li :-> It will also locate Tatkal but before that it will find div whose class has value searchContainer.
- ul+a: : It will sibling of ul i.e. ‘a’.
8. Using ‘^’ operator(similar to starts-with in XPath)
It is used to handle dynamic web element. If value of attribute starts with constant but other part is dynamic, we can use this way. E.g. Inbox(16) Here Inbox is constant while 16 is dynamic.
CSS Syntax: [attributeName^=’attributeValue’]
CSS Selectors Examples:
- [id^=’Inbox’] :-> Any web elements which has ID and starts with ‘Inbox’.
- input[id^=’load’]:-> Any input tag which has ID and starts with ‘load’.
9. Using ‘$’ operator
It is used to handle dynamic web element. If value of an attribute ends with a constant but other part is dynamic, we can use this method.
E.g. 142Mails: Here Mails is constant while 142 is dynamic.
CSS Syntax: [attributeName$=’attributeValue’]
CSS Selectors Example:
- [id$=’Inbox’] :-> Any web elements which has ID and ends with ‘Inbox’.
- input[id$=’load’]:-> Any input tag which has ID and ends with ‘load’.
10. Using * operator(similar to contains in XPath):
It is used to handle dynamic web element. If we are sure an attribute must have
some characters, we can use this method.
CSS Syntax: [attributeName*=’attributeValue’]
Example:
[id*=’Inbox’] :-> All web elements which has ID and contains with ‘Inbox’.
input[id*=’load’] :-> All input tag which has ID and contains with ‘load’.
11. Using more than one attributes(AND):
CSS syntax: tagName[@attributeName=’attributeValue’][@attributeName=’attributeValue’]
If any element is not located by single attribute, we can locate that using more than one attributes. It is similar to AND operator.
Example: input[name=’keyword’][type=’text’]
12. Using more than one attributes(OR):
CSS syntax: tagName[@attributeName=’attributeValue’], [@attributeName=’attributeValue’]
It is similar to OR operator. It can be used for dynamic elements whose attributes keeps changing but to some specific values only. E.g. flag could be either true or false.
Example: input[name=’keyword’], [type=’text’]
13. Using nth-of-type:
You have learnt that nth-child (index) counts all direct children of parent and then return nth child. If you want to get nth specific child node, you can use nth-of-child.
CSS Syntax: tagName:nth-of-type(n)
Example:
In above HTML code, div is first child and
- are 2nd, 3rd and 4th child respectively.
CSS selector:
ul#TrainTicketTypes li:nth-of-type(2) :-> If we consider div as boy and li as girl, so above selector means select 2nd girl child(li) of ul whose id is “TrainTicketTypes”. It will return “Normal” li.
14. Using contains() for inner text:
CSS Syntax: tagName:contains(‘text’)
Example:Advertise on Snapdeal
CSS Selector: a:contains(‘Advertise’)
That’s it. These are easy and most useful ways of writing CSS Selectors. I will keep adding if I come to know more ways.
If you like my posts, please like, comment and share. Feedback and suggestions are
most welcomed.Thank You!!
#HappyLearning