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

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

  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

  7. TagName : Used to locate element by HTML tag

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


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);


 I hope this blog helps you in using CSS Selector


Enjoy your learning journey.


26 views0 comments

Recent Posts

See All

Comentários

Avaliado com 0 de 5 estrelas.
Ainda sem avaliações

Adicione uma avaliação
bottom of page