The document provides a comprehensive guide on using CSS selectors in Selenium WebDriver, detailing the importance and methods for locating web elements. It outlines various locator strategies, including ID, class name, and XPath, while emphasizing CSS selectors for their simplicity and efficiency. Additionally, it explains how to form CSS selectors using attributes, substrings, and the :nth-child syntax to facilitate precise element selection during automation testing.

1. Understanding CSS Selectors in Selenium
CSS Selectors in Selenium
Selenium WebDriver is one of the popular web automation tools. It is open source and
is preferred by many automation engineers to automate the websites. Using Selenium
WebDriver is quite simple and easy. We need to follow the following simple steps to
write an automated test:
 Locate an Element on the WebPage using Browser’s Dev Tools
 Using Selenium WebDriver’s findElement/findElements method we need to supply the locator to locate the element
on the web page.
 Write automation tests and perform assertions.
Before we start writing the test, let’s understand what are locators in Selenium as these
are needed in the first step to automate the tests using Selenium WebDriver.
What are locators in Selenium WebDriver?
Locators in Selenium are used to identify and locate web elements on a web page.
They can be found by inspecting the HTML source code of the web page by using the
Developer tools option provided by the browsers. There are eight different locator
strategies that can be used with Selenium WebDriver.
In the following section, we will be discussing the types of locator strategies.

2. Types of Locators in Selenium WebDriver?
The following are various Locator Strategies supported by Selenium WebDriver:
 ID: Used to locate an element by its ID.
 Name: Used to locate an element by its name.
 TagName: Used to locate an element by its HTML tag.
 ClassName: Used to locate an element by its CSS class.
 LinkText: Used to locate a link by its visible text.
 PartialLinkText: Used to locate a link by the partial value of its visible text.
 XPath: Used to locate an element within the HTML document by evaluating an XPath expression.
 CSS selector: Used to locate an element by its CSS selector.
What are CSS Selectors?
CSS Selectors are used within Selenium to locate elements on a web page. They are
beneficial because they are shorter than XPath locators and allow for a more clear and
crisp method to locate the element. They work by using patterns to match tags and their
attributes, such as class or ID.
CSS Selectors can be used in combination with each other and can also be chained
together. They are supported in all the modern browsers and are a great way to quickly
and precisely locate elements within a web page.
There are five types of CSS Selectors in Selenium WebDriver:
 Using ID
 Using ClassName
 Using Attribute
 Using Substring
 Using nth-child
Locating elements using CSS Selectors
Using CSS Selectors is pretty simple and easy, you just need to open the browser’s
developer tools, read the DOM and find the values easily.
Copying CSS Selector from Browser directly
Browsers also provide an option to copy the CSS Selectors directly from the DOM, you
just need to follow the given steps:

3. Open the Browser and navigate to the pCloudy website’s Login page, open Developer
Tools in Chrome Browser by pressing F12 key or clicking on the three dots below the
“X” button >> More tools >> Developer Tools
Now let’s try to locate the CSS Selector for email Id field by inspecting the field >> right click on
the DOM element >> Copy >> Copy Selector

4. Press Ctrl + F to open the finder in the DOM and paste the value we just copied by
pressing Ctrl + V. It should have copied the “ID” of the field #userId

5. We can also write the CSS Selectors by inspecting the elements manually from the
DOM using the following:
With ID
Syntax
<#><Value of ID attribute>
While Using CSS Selector, “#” is used to locate an element with an ID.
Let’s take the example of the Login page of pcloudy.com website and locate the email
field. Below is the Screenshot of the page, we can notice that ID for the field is “userId”
We can use #userId as CSS Selector for locating this field and write the code as
driver.findElement(By.cssSelector(“#userId”)) in our Selenium tests.

6. Using ID with TagName
Syntax
<HTML tag><#><Value of ID attribute>
In the example we saw above for the email field on Login Page we see that HTML
tag <input> is used for the email field.
We can combine both the HTML Tag and ID and use it for locating the email field and
use the CSSSelector as input#userID.

7. Using ClassName
Syntax
<.><Value of Class attribute>
(.) – A Period/Dot refers to the Class attribute in CSS Selector. In the example we saw
above for the Login Page, let’s locate the Welcome header text using ClassName,
below is the screenshot of the Page

8. Here is the DOM
Welcome Text is in the h1 Tag element which is child of class – “p-16”, class “p-16” is
a child of “d-flex” class whose parent is “signup-row” class and
finally “normal_login_container” is the top node class. Hence the CSS Selector for this
Welcome header will be .normal_login_container .signup-form > .d-flex > .p-16 >
h1.text-center
The dot before the name refers to class.

9. Note the “>” sign before “.d-flex” in the CSS Selector, it is used for selecting the class
that is a direct descendant of “.signup-form” class. Similarly “>” after other class
names as well.
Using Attributes
Syntax
<HTML tag><[attribute =’value of attribute’]>
An attribute can be a value, type, name, etc. which could be a unique value that allows
to identify the web element.
Note: Value of the attribute needs to be supplied in single quotes.
In the example of the email field we saw above, there is a tag <input> having attribute
as “type=email” and “name=userId”:
We can use the CSS Selector for the email field using name attribute follows:

10. input[name=’userId’]
Using combination of type and id attribute
Lets now try to locate the Login button by providing multiple attributes.
So, if we see in the screenshot below we see that the HTML tag is <button> and has the
attribute type as “button”, also it has the attribute id as “loginSubmitBtn”.

11. By combining both of these two we can write the CSS Selector for locating the Login
button as
button[type=’button’][id=’loginSubmitBtn’]

12. Using SubString
CSS Selectors also allow the flexibility to match the partial strings to locate an element
on the web page.
Matching partial Strings can be done in the following 3 ways:
1. Matching a Prefix (Starts With)
2. Match a Suffix(Ends With)
3. Matching a Substring(Contains)
4. Matching a word(Contains)
Match a Prefix
Syntax
<HTML tag><[attribute^=’prefix of the string’]>
(^=) is used to match the string using a prefix.
Let’s take the example of the password field from the Login Page and try to locate it
using the prefix of the name attribute.

13. The name attribute for the field is “password”, we can write the CSS Selector as
input[name ^=’pass’] as it starts with ‘pass’.
Match a Suffix
Syntax
<HTML tag><[attribute$=’suffix of the string’]>
($=) is used to match the string using a suffix.
Let’s take the example of the password field from the Login Page and try to locate it
using the suffix of the name attribute.
The name attribute for the field is “password”, we can write the CSS Selector as
input[name$=’rd’] as it ends with ‘rd’.

14. Match a Substring
Syntax
<HTML tag><[attribute*= ‘Substring’]>
(*=) is used to match the string using a substring.
The name attribute of the email field is “userId”, we can write the CSS Selector as
input[name*=’ser’]

15. Match a word
Syntax
<HTML tag><[attribute~=‘word’]>
(~=) is used to match the word.
Let’s take the example of the Phone field from the pCloudy’s Signup page and try to
locate it using the matching word of the ClassName for the respective country codes.

16. The Class Name for the country code dropdown list field is “‘iti__country”, we can write
the CSS Selector as
li[class~=’iti__country’] and it will locate all the respective elements containing the
classname iti__country.

17. Using :nth-child
Syntax
:nth-child(n)
nth-child matches every element that is the nth child of its parent.
Let’s take an example of the Country list dropdown displayed in the Phone field on
the signup page of pCloudy website.
This field has multiple <li> tag elements, we can use the nth-child selector to iterate
through this list and select the required element.
So, if we want to select the country code of Algeria (it is 6th child), so we can write the
CSS Selector as ul> li:nth-child(6)

18. Selecting the first child
Now, if we want to select the first country code in the list we can use the CSS Selector
as ul> li:first-child. It selected “United States” in the list as it is the first child.
Selecting the last child
Similarly, to select the last child we can use the CSS selector ul> li:last-child

19. It selected “Åland Islands” as it is the last child.
Conclusion
CSS Selectors selectors are easy, precise and simple to use in Selenium tests and
these selectors provide flexibility to the user so he can create his own selector and use
it to find an element. It also adds to the readability part as CSS selectors are easily
readable and understand which field we are referring to.
I would suggest trying your hands on locating the elements in your selenium tests by
using CSS Selectors.
Happy Testing!