Hi all, in this tutorial, I will describe you how to write effective CSS Selenium selectors a.k.a 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 Selenium Selector Strategies

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

Basic Syntax

ID#idname
Class.classname

1) Using Absolute Path

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

Example

Syntaxform>div>input

2) Using Non-Absolute Path

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

Example

Syntax: form .form-group #user-message

3) Using Tag Name

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

Example

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

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

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

7) Using Ending Text of an Attribute

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

Example

Syntax: input[id$=’message’]

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

You can use Tag#Id” 

Example

Syntax: input#user-message

10) Using Tag and Class

You can use Tag.Class” 

Example

Syntax: input.form-control

11) Using first-of-type

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

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 last element or child you can use below locators.

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

13) Using *:last-of-type

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

Example

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

14) Using tag:nth-of-type(n)

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

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)

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

16) Using Sibling “+” Operator

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

Sample HTML:

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

17) Exclude a CSS Class Name in CSS Selenium Selector

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

Example:

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

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

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

http://www.swtestacademy.com/smart-xpath/

You can find many tricks in below pdf. I suggest you to 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 next article 😉
Onur