How to Write Effective CSS Locators


Hi all, in this tutorial, I will describe 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 Locator Strategies

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

Basic Syntaxs

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

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

javafx

Database Operations in JavaFX

By Onur Baskirt / Apr 1, 2016 / 56 Comments
Before started this section, please check the first article and learn How to Start JAVAFX! http://www.swtestacademy.com/getting-started-with-javafx/ At first, part of JavaFX tutorial series, we created a sample JavaFX project, designed the draft version of the UI and set up an...
selenium

How to Write Smart XPath Locators

By Onur Baskirt / Sep 24, 2017 / 5 Comments
Hi all, in this tutorial, I will describe you how to write smart and non-brittle XPath locators. When we write our test scripts, we generally prefer to use id, name, class, etc. these kinds of locators. However, sometimes we could not...
selenium

How to Write Effective CSS Locators

By Onur Baskirt / Oct 1, 2017 / 0 Comments
Hi all, in this tutorial, I will describe 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...
rest assured

REST API Testing with Rest Assured

By Onur Baskirt / Mar 8, 2016 / 32 Comments
Outline In this post, I will explain what is API and API testing, what is the difference between SOAP and REST services, and how to test REST APIs with Rest Assured Library. What is API? API stands for Application Programming...
javafx

Getting Started with JavaFX

By Onur Baskirt / Mar 25, 2016 / 0 Comments
When I started to work in my current position, one of my task is to do manual operations for campaign products  every week. After the second week, I thought that I have to automate this task using a GUI based...
selenium

Selenium-1: Quick Start to Automation with Selenium WebDriver & JAVA & JUnit & Maven & IntelliJ

By Onur Baskirt / Sep 8, 2015 / 26 Comments
Outline Selenium Webdriver is the most popular open source web test automation framework across the wide range of browsers and platforms. In this tutorial, you will learn how to do web test automation with Selenium Webdriver and the related tools....
selenium

Selenium-11: Execute JavaScript with JavascriptExecutor

By Onur Baskirt / Jan 27, 2016 / 15 Comments
Outline Sometimes we cannot handle some conditions or problems with Webdriver, web controls don't react well against selenium commands. In this kind of situations, we use Javascript. It is useful for custom synchronizations, hide or show the web elements, change...
page object model

Page Object Model with C#

By Ege Aksoz / Jun 18, 2017 / 8 Comments
In the previous tutorial, we’ve taken the initial steps and entered the world of automated testing. We also wrote our first automated test. From this point on, since we are not just going to write one test, we need to...
selenium

How to Select a Date From DatePicker Using Selenium

By Onur Baskirt / Aug 13, 2016 / 6 Comments
When you need to automate a airway, hotel, or similar websites you need to deal with Datepickers and some times it is a little bit cumbersome to select a specific date on the Datepicker or calendar.  In this post, I...

Getting Started with RobotFramework on Windows

By Onur Baskirt / Apr 25, 2016 / 12 Comments
What is RobotFramework? RobotFramework is a GENERIC test automation framework for acceptance testing and acceptance test-driven development (ATTD). What it means that you can do web, mobile, desktop and other test automation activities with related test libraries. These libraries can...
By | 2017-10-22T23:41:52+00:00 October 1st, 2017|Selenium, Test Automation|0 Comments

About the Author:

Onur Baskirt
Onur Baskirt is a senior IT professional with 10+ years of experience. He worked at Bahçesehir University, ST Microelectronics, Huawei and Ericsson as research assistant, design verification engineer and software test leader. Also, he worked as software test leader and software operations manager at Turkey's biggest technology retailer, Teknosa. Now, he is working as Head of Software Testing and Manager of two Development Teams at Kariyer.net. His current research areas are technical software testing, programming, and computer science. Formerly, he has several research works and papers on digital chip design & verification. His hobbies are sport, dancing, traveling, and nutrition. You can find detailed information about him on his linked-in page.

Leave A Comment