Locating Webelements using CSS Selector

Selenium Webdriver is one of the popular web automation tools. It is open source and is preferred by automation testers to automate the websites. We need to follow simple steps to write an automated test

• Locate an element on webpage

• Using findElement/findElements we need to supply the locator to locate the element on the webpage

• Write automation tests and perform assertions

Locators in Selenium

Locators in selenium are used to locate web elements on a webpage

There are 8 locators in selenium to identify elements on a webpage

1.ID : Used to locate element by ID

syntax : driver.findElement(By.id("element_id");

2. Name : Used to locate element by name

syntax : driver.findElement(By.name("element_name");

3.ClassName : Used to locate element by class

syntax : driver.findElement(By.className("element_class");

4.LinkText : Used to locate a link by its visible text

syntax : driver.findElement(By.linkText("element_linktext");

5.Partial Linktext : Used to locate a link by partial value of visible text

syntax : driver.findElement(By.partialLinkText("element_partial_linktext");

6.Xpath : Used to locate element by its xpath

syntax : driver.findElement(By.xpath("element_xpath");

7.TagName : Used to locate element by HTML tag

syntax : driver.findElement(By.tagName("element_tagname");

8.CSS Selector : Used to locate element by its CSS Selector

syntax: driver.findElement(By.cssSelector("element_cssSelector);

Now let's discuss about CSS Selector

CSS means Cascading Style Sheets. These are similar to xpath expressions, whose actual purpose in web development is to locate UI elements on the webpage for applying styles such as color, size, font family, background color and more.

By.cssSelector() method is used to locate the elements in Selenium webdriver for precisely identifying and interacting with elements on a webpage using CSS Selectors

Types of CSS Selectors in Selenium

1. ID Selector

Selects element based on their ID attribute

Syntax : By.cssSelector(“tag#id”)   or  By.cssSelector(“#id”)

Here we are finding email textbox and send email into textbox

or we can also write

2. Class Selector

Selects element based on their class attribute

Syntax : By.cssSelector(“tag.class”)  or  By.cssSelector(“.class”)

If multiple elements have same HTML tag and classname, then the first element in the source code will be recognized

Here we are finding password textbox and send password

or we can also write

3. Attribute Selector

Selects elements based on their attribute value

Syntax : By.cssSelector(“tag[attribute=’value’]”) or By.cssSelector(“[attribute=’value’]”)

Here we are identifying login button and click it

or we can also write

4. Combining Attributes

Select element based on their tag name , class name and attribute value

Synatx : By.cssSelector(“tag.class[attribute = ‘value’]”)  or By.cssSelector(“.class[attribute=’value’]”)

driver.findElement(By.cssSelector("input.form-control[name='email']")).sendKeys("test@email.com");

or we can also write

driver.findElement(By.cssSelector(".form-control[name='email']")).sendKeys("test@email.com");

5. Substring

In CSS Selector substring matching is possible using ^ indicating prefix match, $ indicating suffix match and * indicating substring.

Indicating prefix match

Syntax : HTMLtag[class or id ^ = ‘value’]

Here we are trying to locate email textbox

Indicating Suffix match

Syntax : HTMLtag[class or id $ =’value’]

Indicating Substring

Syntax : HTMLtag[class or id *=’value’]

Now let’s learn to navigate through child elements

Direct Child : We can navigate from parent locator to direct child locator using ‘>’ symbol

Syntax : parentlocator > directchildlocator

Here a is the parent and div is child

SubChild : We can navigate from parent locator to subchild locator by giving a space in between them

Syntax :  parentlocator   subchildlocator

Here a is the parent and img is the subchild

Nth child : Nth child is used to select nth element in list

Syntax  : <HTMLtag><Class or ID> <List> : <nth child (number of value in the list)>

We can select the second element as below

CSS selectors not only help to locate elements on a webpage but also allows us to access and style various attributes of those elements. With CSS selectors, we can retrieve information such as background color, font size, border color and more

For example, to retrieve the background color of an element using a CSS selector, you can use the background-color property. Similarly, you can use the font-size property to obtain the font size and the border-color property to fetch border-color

Ex : driver.findElement(By.id(“id”)).getCssValue(“background-color");

driver.findElement(By.id("id")).getCssValue("font-size");

driver.findElement(By.id("id")).getCssValue("border-color");

Advantages of Css Selector

• Css selctors are generally faster than Xpath when locating elements

• Css selectors are often shorter and easy to read

Limitation of Css Selector

• Css selectors are unidirectional. They only traverse nodes from parent to child and not backwards

• CSS selectors cannot directly target text nodes or perform text-related functions

• While modern browsers fully support CSS selectors, older browsers might not support all features

• Handling highly dynamic content or complex structures can be challenging compared to xpath

 I hope this blog helps you in using CSS Selector

Enjoy your learning journey.