top of page
hand-businesswoman-touching-hand-artificial-intelligence-meaning-technology-connection-go-

Learning to write WebElement locators using CSS Selectors? Here you go.... All about CSS Selectors!!

Introduction:

Writing CSS Selector for locating web elements is one of the most important skills an Automation Tester should have. This blog covers everything which is required to know to be an expert in writing CSS Selector.

The following are the points which are covered in this Blog:

  • What is Locator?

  • Different Types Of Locators

  • What is CSS Selectors?

  • Different ways CSS Selectors can be written

  • Advantages and Disadvantages of CSS Selectors over Xpath

Let's go step by step.


What is Locator?

First of all, what is the Locator? The locator is the address that identifies a web element uniquely within the webpage.

Locators are the HTML properties of a web element which helps Selenium to find the web element on which it needs to perform the action.


WebElement Interface is an Interface in Selenium. This interface is used to perform all operations while interacting with the webpage. WebElement Interface has all the methods which are mostly required to perform actions on the Webpage such as clear(), click(), sendKeys(), etc.

Also, WebElement represents an individual HTML element.


Different Types of Locators

There are 8 different locators in Selenium namely:

1) By className()

2) By id()

3) By name()

4) By tagName()

5) By linkText()

6) By partialLinkText()

7) By cssSelector

8) By xpath


Out of all these locators, the two most commonly and frequently used are By cssSelector() and

By xpath(). In this blog, we will discuss everything about CSS Selector locators. I am planning to write a separate blog for xpath locators.


What are CSS Selectors?

CSS selector is the combination of an element selector and a selector value that identifies the web element. A selector pattern is the combination of element selector and selector value.

The selector pattern is built using HTML tags, attributes, and values. The main theme behind the procedure to create CSS Selector and Xpath are mostly similar. The only difference is in their construction syntax or protocol.


Different ways CSS Selectors can be written

To make the process of writing CSS Selector simple, let's break it into parts


Firstly let's understand the Most Common terms are:

· HTML tag – It is the tag that is used to denote the web element which we want to

access.

· Value of attribute – It is the value of an ID attribute that is being accessed.


Now, the second step is, let's try to remember which symbol represents what.

# represents ID

. represents Class

* represents Contains

^ represents Starts with

$ represents Ends With

> represents Direct Child

Space represents Child or SubChild

+ represents the next sibling

: represents the type of


Now Let's try to write the CSS Selectors.


1) CSS Selector By id

Syntax: <HTML tag><#><Value of ID attribute> OR HTML tag[id=value]

Sample Element: Use the following link and element to practice

<input value="admin" class="password" type="password" id="Password" name="Password">

Example: input#Password OR input[id=Password]


# – The hash sign is used to symbolize the ID attribute.



2) CSS Selector By Class

Syntax: <HTML tag><.><Value of Class attribute> OR HTML tag [class=value]

Sample Element: Use the following link and element to practice

<input value="admin" class="password" type="password" id="Password" name="Password">

Example: input.password OR input[class=password]


The value of Class is always preceded by a dot (.) sign.


3) By Class with 3 classes

Syntax: <HTML tag><.><Value of Class1 attribute><.><Value of Class2 attribute><.><Value of Class2 attribute>

Sample Element: Use the following link and element to practice

<button type="submit" class="oxd-button oxd-button--medium oxd-button--main orangehrm-login-button" data-v-7e88b27e="" data-v-30b9e6c4=""><!----> Login <!----></button>

Example: button.oxd-button.oxd-button--medium.oxd-button--main.orangehrm-login-button


Important Note: while writing CSS Selector with multiple classes we have to replace spaces with dots.


4) CSS Selector with two attributes

Syntax: <HTML tag>[iattribute1=value] [iattribute2=value]

Sample Element: Use the following link and element to practice

<input class="oxd-input oxd-input--active" type="password" name="password" placeholder="Password" data-v-844e87dc="">

Example: input[name =password][type=password]


5) Contains in CSS Selector

Syntax: <HTML tag>[iattribute*=value]

Sample Element: Use the following link and element to practice

<input class="oxd-input oxd-input--active" name="username" placeholder="Username" autofocus="" data-v-844e87dc="">

Example: input[name*=name]

input[name*=user]


6) Starts With in CSS Selectors

Syntax: <HTML tag>[iattribute^=value]

Sample Element: Use the following link and element to practice

<input class="oxd-input oxd-input--active" name="username" placeholder="Username" autofocus="" data-v-844e87dc="">


Example: input[name^=user]


7) Ends With in CSS Selector

Syntax: <HTML tag>[iattribute$=value]

Sample Element: Use the following link and element to practice

<input class="oxd-input oxd-input--active" name="username" placeholder="Username" autofocus="" data-v-844e87dc="">

Example: input[name$=name]


8) Direct child

Syntax: <HTML tag of Parent Node> > attribute

Sample Element: Use the following link and element to practice

​<button type="submit" class="oxd-button oxd-button--medium oxd-button--main orangehrm-login-button" data-v-7e88b27e="" data-v-30b9e6c4=""><!----> Login <!----></button>

Example: div > button

It used to refer to the immediate child of a node


9) Child or Subchild

Syntax: <HTML tag of Parent Node> attribute

Sample Element: Use the following link and element to practice

<input class="email input-validation-error" value="admin@yourstore.com" autofocus="autofocus" type="email" data-val="true" data-val-email="Wrong email" data-val-required="Please enter your email" id="Email" name="Email" aria-describedby="Email-error" aria-invalid="true">


Example: div.inputs input#Email


It used to refer to the immediate child or sub child of a node


10) Next sibling

Syntax: <HTML tag of Parent Node> > attribute1 + attribute 2

Sample Element: Use the following link and element to practice

<input class="email input-validation-error" value="admin@yourstore.com" autofocus="autofocus" type="email" data-val="true" data-val-email="Wrong email" data-val-required="Please enter your email" id="Email" name="Email" aria-describedby="Email-error" aria-invalid="true">

Example: div.inputs label + input#Email


For 11, 12 and 13 let's take an example from

https://opensource-demo.orangehrmlive.com/

The menu bar on the left shows all module names



HTML code for the menu bar. There are 11 modules. How can we select any one of the modules using CSS Selector?



11) First-of-type in CSS

First-of-Type is used to select the first element in the list.

Syntax: <HTML tag of Parent Node> > attribute1: first-of-type

Sample Element: From the menu bar we want to select "Admin" module which is the first one. Then we can use first-of-type

Example: ul li.oxd-main-menu-item-wrapper:first-of-type


12) Last-of-type in CSS

Last of Type is used to select the last element in the list.

Syntax: <HTML tag of Parent Node> > attribute1: last-of-type

Sample Element: In the same menu bar we want to select "Buzz" module which is the last one. Then we can use last-of-type



Example: ul li.oxd-main-menu-item-wrapper:last-of-type


13) nth-of-type in CSS

nth of Type is used to select the nth element in the list.

Syntax: <HTML tag of Parent Node> > attribute1: last-of-type

Sample Element: In the above menu bar we want to select the "any number" module which can be at nth one. Then we can use nth-of-type


Example:

ul li.oxd-main-menu-item-wrapper:nth-of-type(3) --- for 3rd element (Leave)

ul li.oxd-main-menu-item-wrapper:nth-of-type(6) --- for 6th element (My Info)


For 14 let's take an example from

https://opensource-demo.orangehrmlive.com/

Employer Name field


14) Not operator in CSS

Syntax: <HTML tag><.><Value of Class1 attribute><.><Value of Class2 attribute>:not(<.><Value of Class3 attribute>)


Sample Element: Employer Name is one of the input fields along with Username. We can write a locator with CSS Selector by using 'not' for the Username as below.



Example:

div.oxd-grid-4.orangehrm-full-width-grid input:not(.oxd-input.oxd-input--active)



These are all the different ways we can write CSS selectors.


Advantages and Disadvantages of CSS Selectors over Xpath


Advantages:

Performance is the same or faster than XPath.

Easier to learn and easier to use


Disadvantages:

CSS Selector only allows unidirectional flow which is from the Parent node to the child node.


Hope you find this blog useful. Give me likes if you like my post.

Thanks and Happy Coding!!




32 views0 comments

Recent Posts

See All
bottom of page