_edited_edited.png)
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
https://admin-demo.nopcommerce.com/ (Password) |
<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
https://admin-demo.nopcommerce.com/ (Password) |
<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
https://opensource-demo.orangehrmlive.com/ (Login Button) |
<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
https://opensource-demo.orangehrmlive.com/ (Password) |
<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
https://opensource-demo.orangehrmlive.com/ (Username) |
<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
https://opensource-demo.orangehrmlive.com/ (Username) |
<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
https://opensource-demo.orangehrmlive.com/ (Username) |
<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
https://opensource-demo.orangehrmlive.com/ (Login Button) |
<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
https://admin-demo.nopcommerce.com/ |
<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
https://admin-demo.nopcommerce.com/ |
<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
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
Employer Name field
