CSS Selectors in Selenium 17 Tactics and Examples [2021]

Hi all, CSS Selectors in Selenium will be explained in this tutorial, I will describe to you how to write effective CSS Locators to interrogate web elements for your automation projects. As a rule of thumb, your interrogation strategy should be in below order:

  • First try to use Id, name, class, etc.
  • Then, try to interrogate by CSS
  • Then, use XPath to find elements.

CSS Selectors in Selenium Strategies

Reference Demo Site: http://www.seleniumeasy.com/test/basic-first-form-demo.html

Basic Syntax

ID #idname
Class .classname

1) Using Absolute Path CSS Selector

You should use > sign to reach an element directly.  (Note: For XPath, we use / sign for this.)

Example

Syntaxform>div>input

css selectors in selenium

2) Using Non-Absolute Path CSS Selector

You should use white space between tags to locate the element. Use “.” for class and “#” for id.

Example

Syntax: form .form-group #user-message

non-absolute path

3) Using Tag Name CSS Selector in Selenium

You can write the tag name directly like “form”, “div”, “img”,”body”, etc. As below figure, I wrote the “form” tag to locate the form element.
(Note: For XPath we use //tagname for this.)

Example

css locators

4) Using Tag & Attribute & Value Trio

You can use tag[attribute=’value’] syntax.
(Note: For XPath we use tag[@attribute=’value’] for this.)

Example

Syntax: input[id=’user-message’]

css locators in selenium

5) Using Containing Text of an Attribute

You can use tag[attribute*=’containing text’] syntax.
(Note: For XPath we use tag[contains((@attribute,’containing text’)] for this.)

Example

Syntax: input[id*=’er-messa’]

css in selenium

6) Using Starting Text of an Attribute

You can use tag[attribute^=’starting text’] syntax.
(Note: For XPath we use  tag[starts-with( @attribute, ‘starting text’)] for this.)

Example

Syntax: input[id^=’user’]

css text locator

7) Using Ending Text of an Attribute

You can use tag[attribute$=’ending text’] syntax.

Example

Syntax: input[id$=’message’]

ending text in css selenium

8) Using Comma Operator to Implement OR Operation

You can use ,” operator between two CSS locator statements.

Example

Syntax: form#get-input,input#user-message

9) Using Tag and ID CSS Selector in Selenium

You can use Tag#Id” 

Example

Syntax: input#user-message

tag in css

10) Using Tag and Class CSS Selector in Selenium

You can use Tag.Class” 

Example

Syntax: input.form-control

class in css selenium

11) Using first-of-type CSS Selector in Selenium

You can use Tag:first-of-type”. It will select the first tag element.

Example

Syntax: .tree-branch>ul>li:first-of-type

12) Using last-of-type CSS Selector in Selenium

You can use Tag:last-of-type”. It will select the last tag element.

Example

Syntax: .tree-branch>ul>li:first-of-type

Note: If you want to find the last element or child you can use the below locators.

  • Tag:nth-last-of-type(n)
  • Tag:nth-last-child(n

13) Using *:last-of-type CSS Selector in Selenium

You can use *last-of-type”. It will select the last child of the parent tag.

Example

Syntax: .tree-branch>ul>*:last-of-type (Selects the last child of parent tag “ul”.)

last-of-type css example

14) Using tag:nth-of-type(n) CSS Selector in Selenium

You can use tag:nth-of-type(n)”. It will select the nth tag element of the list.

Example

Syntax: .tree-branch>ul>li:nth-of-type(3) (Selects 3rd li element.)

nth-of-type CSS Selector in Selenium

Note: If you don’t specify a tag as  *:nth-of-type(3) it will allow you to select the third child.

15) Using tag:nth-child(n) CSS Selector in Selenium

You can use tag:nth-child(n)”. It will select the nth child.

Example

Syntax: .tree-branch>ul>li:nth-child(3) (It will select the nth child.)

nth-child CSS Selector in Selenium

16) Using Sibling “+” Operator CSS Selector in Selenium

You can use “E1+ E2. First, it finds E1 then select E2.

Sample HTML:

<ul id="Cars">
   <li id="mercedes">Mercedes made in Germany!</li>
   <li>BMW</li>
   <li>Porsche</li>
</ul>

Syntax: li#mercedes + li

li#automation + li‘ will first go to li element with id ‘mercedes’ and then select its adjacent li which is ‘BMW’ list item.

Example

Syntax: .tree-branch>ul>li:nth-child(3) + li (It will select the next element.)

sibling CSS Selector in Selenium

17) Exclude a CSS Class Name in Selenium CSS Locators

You can exclude any of the class names with :not(.class-name) syntax.

Example:

.btn.btn-info.pull-right:not(.xs-mt-0) 

The above selector excludes “xs-mt-o” class and selects the below the line as shown below figure.

Also, you can learn how to write Smart XPath locators in the below article.

All Selenium XPath Tactics Explained

You can find many tricks below pdf. I suggest you save it.

https://www.red-gate.com/simple-talk/wp-content/uploads/imported/1269-Locators_table_1_0_2.pdf?file=4937

See you in the next article ;)
Onur

8 thoughts on “CSS Selectors in Selenium 17 Tactics and Examples [2021]”

      • According to your XPath example you are looking for the 3rd child to the UL(Unordered list) which should be Table in place of DatePicker shown in the image, please validate it once more.

        Reply
        • Hi Gaurav, I added an extra “p” tag that’s why it works as expected. I did not see any error. When you use the child, it ignores types of the tags, just get the nth child element of the parent tag. Please modify the DOM as shown, and try the same locator/selector. Have a good day. Thanks for the comment. :)

          Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.