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
2. Name : Used to locate element by name
3.ClassName : Used to locate element by class
4.LinkText : Used to locate a link by its visible text
5.Partial Linktext : Used to locate a link by partial value of visible text
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
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");
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.