CSS Selector techniques in Selenium WebDriver with examples

In this blogpost, we will focus on writing CSS Selector expressions for locating elements on the web page.

Visit How to write/ check Xpath and CSS Selector expression in any browser? for understanding the method of writing Xpath expression in the browser.

Now that you have gone through above mentioned link, let us start exploring different techniques of writing Xpath.

Open this URL, and apply CSS Selectors techniques mentioned below.

1. Using HTML attribute :

Syntax : $$(“tagName[attributeName=’attributeValue’]”)

Example : $$(“li[id=’menu-item-8′]”)

Css-selector-technique-using-ID

Explanation : The CSS selector expression locates LI element with ID attribute and its value set as menu-item-8.

2. Using multiple HTML attributes :

Syntax : $$(“tagName[attributeName1=’attributeValue1′][attributeName2=’attributeValue2′]”)

Example : $$(“*[role=’navigation’][id=’site-navigation’]”)

Css-selector-technique-using-multiple-HTML-attributes

Explanation : The CSS selector expression locates  element with role attribute and its value set as navigation AND ID attribute, its value set as site-navigation.

3. Using # (id) symbol :

Syntax : $$(“tagName#idAttributeValue”) OR $$(“#Id”)

Example : $$(“li#menu-item-8”) OR $$(“#menu-item-8”)

Css-selector-technique-using-ID-Hash

Explanation : The CSS selector expression locates LI element with ID attribute and its value set as menu-item-8.

4. Using . (dot) symbol :

Syntax : $$(“tagName.className”) OR $$(“.className”)

Example : $$(“h2.o2-app-page-title”) OR $$(“.o2-app-page-title”)

Css-selector-technique-using-Class-dot

Explanation : The CSS selector expression locates H2 element with class attribute and its value set as o2-app-page-title.

5. Using ^ (Starts with) symbol with HTML attribute :

Syntax : $$(“tagName[attribute_name^=’portion_of_attribute_value’]”)

Example : $$(“*[class^=’screen-‘]”)

Description : The technique is used to locate elements having partial HTML attribute value match.

Css-selector-technique-using-partial-match

Explanation : The CSS selector expression locates all the elements on the web page, whose class name starts with the string “screen-“ .

6. Using $ (Ends with) symbol with HTML attribute :

Syntax : $$(“tagName[attribute_name$=’portion_of_attribute_value’]”)

Example : $$(“*[class$=’reader-text’]”)

Description : The technique is used to locate elements having partial HTML attribute value match.

Css-selector-technique-using-partial-match-ends-with

Explanation : The CSS selector expression locates all the elements on the web page, whose class name ends with the string “reader-text” .

7. Using * (contains) symbol with HTML attribute :

Syntax : $$(“tagName[attribute_name*=’portion_of_attribute_value’]”)

Example : $$(“*[class*=’reader-text’]”)

Description : The technique is used to locate elements having partial HTML attribute value match.

Css-selector-technique-using-partial-match-contains

Explanation : The CSS selector expression locates all the elements on the web page, whose class name contains the string “-reader-text” .

Advertisements

#css-selector-selenium-webdriver, #css-selector-using-class, #css-selector-using-ends-with, #css-selector-using-html-attribute, #css-selector-using-id, #css-selector-using-start-with