How to locate web element using CSS with selenium web driver?

In Selenium locating element using CSS selector is very powerful approach when we are unable to search element using simple locators. We can go for CSS or Xpath.

Before actually looking at how do we can locate element using CSS with selenium WebDriver. Let’s us see brief about CSS.

Brief information about CSS:

• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen. Example color, font, layout  etc of content displayed on the page.
• Single CSS can be applied to multiple pages, web elements, which saves lot of efforts.

How to create CSS selector expression?

You just need to remember below syntax to create CSS selector however below expression may not be applicable for complex case. No worries, we can use pseudo codes for it, you will find details about pseudo code below.

Syntax:

Tag[Attribute=Value]

Note: Multiple combinations can be formed for above syntax. As not all fields are mandatory.

Above expression looks bit complex. Let’s start with simple CSS selector then we will move to complex one.

Find all the elements with html tag name:

css= div

Below css selector will fetch all the div elements from the web page.

driver.FindElement(By.CssSelector("div"));

Find elements with tag name and id attribute:

css=div#123 or div[id=’123′]

# symbol is used to denote “id” attribute of the tag. You can also use id attribute and value.

<div class=”_1GEhLw”  id= “123” data-reactid=”163″>Kent</div>

This will fetch all div elements which has id = 123.

driver.FindElement(By.CssSelector("div#123")); Or driver.FindElement(By.CssSelector("div[id='123']"));

Find all the tag with class name:

You can use this selector when you know html tag and class name. . (dot) symbol is to denote “class” attribute of the tag.

css=div.test or div[class = ‘test’]

driver.FindElement(By.CssSelector("div.test")); Or driver.FindElement(By.CssSelector("div[class='test']"));

Find all the elements with class and Id:

css= div[id = ‘123’][class = ‘test’] or div#123[class = ‘test’] or div.test[id = ‘123’]

It will select div elements with class name = test and id = 123.

driver.FindElement(By.CssSelector("div[id = '123'][class = 'test']")); Or driver.FindElement(By.CssSelector("div#123[class = 'test']")); Or driver.FindElement(By.CssSelector("div.test[id = '123']")); Or driver.FindElement(By.CssSelector("div#123.test"));

Find all <div> tags using multiple attributes:

driver.FindElement(By.CssSelector("div[id = '123'][class = 'test'][type = 'round']"));

Find all <div> tags which encloses text “Puma”:

driver.FindElement(By.CssSelector("div[contains("Puma")]")); Or driver.FindElement(By.CssSelector("div[text()="Puma")]"));

Find <div> elements when multiple classes are present in tag:

driver.FindElement(By.CssSelector("div.class1.class2");

Find elements for which part of attribute changes when next time you visit the page:

driver.findElements(By.cssSelector("input[id^='Emp']"));

Where, id begins with string “Emp” where id values generated automatically such as Emp1, Emp2 etc.

driver.findElements(By.cssSelector("input[id$='emp']"));

Where, id ends with string “Emp” where id values generated automatically such as 1_emp, 2_emp etc.

driver.findElements(By.cssSelector("input[id*='emp']"));

Where, id has substring “Emp” where id values generated automatically such as 1_emp_a, 2_emp_b etc.

Find element using text enclosed between html tags:

driver.findElements(By.cssSelector("div:contains('Text enclosed in div tag')"));

Find elements using pseudo code:

Pseudo codes are used when you are unable to locate web element using simple expressions.A pseudo-class always consists of a “colon” (:) followed by the name of the pseudo-class. They can also have a value between parentheses.

driver.findElements(By.cssSelector("div:nth-child(2)"));

Where “div” element is second child of it’s parent.

Simple trick to find CSS selector: (Applicable for Chrome, Firefox, IE)

Right click on element you want select using CSS selector,

Select “Inspect”, in browser’s developer panel opened

 

Check last highlighted text in last line.