Hello Folks,

We have seen all locators except CSS Selectors in old posts. You can find links of old posts below:

Part 1: Ways of Locating Web Elements in Selenium using ID

Part 2: Ways of locating Web element using: Name, Class Name, Tag Name, Link Text

Part 1: All about XPath in Selenium Webdriver: Basic concepts

Part 2: All about XPath: Different ways of writing XPath expression.

We will cover CSS Selector in this post. We will see below topics:

  1. What is CSS?
  2. What is CSS Selectors.
  3. Different ways of writing CSS Selectors.

What is CSS:

  • 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:


<p style="color:green;font-size:24px;">Hey, There!!</p>

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.

What is CSS Selector:

  • 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.

Ways of writing CSS Selectors:

1.Using attribute and their value:

CSS Syntax:

  1. tagName[attributeName=’attributeValue’] :- To locate web elements with specified tag and attribute name and its value.
  2. [attributeName=’attributeValue’]: To locate web elements with any tag but has specified attribute name and its value.

Consider below HTML code:


<input autocomplete="off" name="keyword" type="text" class="col-xs-20 searchformInput keyword" id="inputValEnter" onkeypress="clickGo(event, this)" placeholder="Search products &amp; brands" value="" strtindx="" endindx="">

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’]

2. Using ID :

CSS selector provides a direct way to locate a web element which has ID as an attribute.

CSS syntax:

a. tagName#IDValue (To find a web element with specified tag and ID).

b. #IDValue(To find all web element which has specified ID as an attribute)

Example:

Consider below HTML code:


<input autocomplete="off" name="keyword" type="text" class="col-xs-20 searchformInput keyword" id="inputValEnter" onkeypress="clickGo(event, this)" placeholder="Search products &amp; brands" value="" strtindx="" endindx="">

CSS Selectors Examples:

input#inputValEnter :-> All input nodes which has id value as “inputValEnter”.

#inputValEnter:-> Any nodes which has id value as “inputValEnter”.

3. Using class:

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).

b. .IDValue(To find all web element which has specified class as an attribute)

Example:

Consider below HTML code:


<input autocomplete="off" name="keyword" type="text" class="col-xs-20 searchformInput keyword" id="inputValEnter" class="searchValue" onkeypress="clickGo(event, this)" placeholder="Search products &amp; brands" value="" strtindx="" endindx="">

CSS Selectors Examples:

input.searchValue: ->All input nodes which has class value as “searchValue”.

.searchValue:->Any nodes which has class value as “searchValue”.

4. Using direct child or immediate child:

CSS Syntax: Parent node > Child node

We use single slash (/) in XPath for immediate child. In CSS we use arrow (>) symbol to locate immediate child.

Example:

Consider below html:


<ul id="Demo1List" class="CountryName">

<li id="India" type="Link" class="btn">India</li>

<li id="America" type="Link" class="btn">America</li>

</ul>

CSS Selectors Examples:

1. ul>li :- It will go to first li i.e. India.

2. ul#DemoList > li : It will search for ul which has specified ID and then will go for first li child of ul.

5. Using any child(Direct or indirect)

In XPath we locate any child of parent using double slash(//). In CSS, we use white space.

CSS syntax: tagName<white space> tagName

Example:

Consider below example:


<ul id="Demo1List" class="CountryName">

<li id="India" type="Link" class="btn">India</li>

<li id="America" type="Link" class="btn">America</li>

</ul>

<ul id="Demo2List" class="CityName">

<li id="Bangalore" type="Link" class="btn">Bangalore</li>

<li id="Delhi" type="Link" class="btn">Delhi</li>

</ul>

CSS Selectors Examples:

  1. 1. ul li :-> It will locate four li. Two from first ul and two from second ul.
  2. 2. ul#Demo1List li :->It will locate ul first which has id “Demo1List” and then locate all li under ul.
  3. 3. ul#Demo2List li :->It will locate ul first which has id “Demo2List” and then locate all li under ul.

6. Using nth-child:

It means nth child of parent. Remember it is similar to grouping as in XPath  but not tagwise. It is all children of parent node.

CSS Syntax: tagName:nth-child(n)

Example:


<ul id="TrainTicketTypes">

<div class="searchContainer"></div>

<li>Tatkal</li>

<li>Normal</li>

<li>Vikalp</li>

</ul>

In above HTML code, div is first child and <li> are 2nd, 3rd and 4th child respectively.

CSS Selector Examples:

  1. ul#TrainTicketTypes li:nth-child(2) :-> This selector means locate ‘ li’ if it is second child of
    ‘ul’ whose id is “TrainTicketTypes”. It will locate ‘li’ which has text “tatkal” has it is second child of ul.
  2. 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:


<span>

<ul id="TrainTicketTypes">

<div class="searchContainer"></div>

<li>Tatkal</li>

<li>Normal</li>

<li>Vikalp</li>

</ul>

<a href="www.google.com">Google</a>

</span>

CSS Selectors Examples:

  1. 1. div + li :-> It will locate Tatkal.
  2. 2. div.searchContainer + li :-> It will also locate Tatkal but before that it will find div whose class has value searchContainer.
  3. 3. 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:

  1. 1. [id^=’Inbox’] :-> All web elements which has ID and starts with ‘Inbox’.
  2. 2. input[id^=’load’]:-> All input tag which has ID and starts with ‘load’.

9. Using ‘$’ operator(similar to ends-with in XPath)

It is used to handle dynamic web element. If value of attribute ends is 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:

  1. 1. [id$=’Inbox’] :-> All web elements which has ID and ends with ‘Inbox’.
  2. 2. input[id$=’load’]:-> All 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:

1. [id*=’Inbox’] :-> All web elements which has ID and contains with ‘Inbox’.

2. 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:


<ul id="TrainTicketTypes">

<div class="searchContainer"></div>

<li>Tatkal</li>

<li>Normal</li>

<li>Vikalp</li>

</ul>

In above HTML code, div is first child and <li> 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:contians(‘text’)
Example:
<a class=”underLineOnHover” href=”https://ads.snapdeal.com/”>Advertise on Snapdeal</a>
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

One thought on “CSS Selector In Selenium Webdriver: Points You Must Know

Leave a Reply