Learn how to create a dynamic css selector in Selenium to locate elements on web pages that may change their location or attributes over time.

Introduction

CSS selectors in Selenium with Java are utilized for locating web elements on a webpage using CSS selectors. CSS selectors are patterns that enable the selection of elements in an HTML document.

How to Create Dynamic CSS Selector in Selenium

Dynamic CSS selectors refer to selectors that are generated or modified dynamically based on the attributes or states of web elements. These selectors are particularly useful when element attributes or values change dynamically during runtime.

Basic syntax

Example: parent tag > child tag
Example: form > input

absolute and relative selectors

In Selenium, CSS selectors can be classified into two types: absolute and relative selectors. Each type has its own characteristics and usage.

Absolute CSS Selectors: Absolute selectors are created by specifying the complete CSS path from the root element to the target element. They provide the entire hierarchy of elements from the root, such as the HTML or body element, down to the desired element. Absolute selectors can be more specific but may become brittle if there are changes in the HTML structure.

Example of an absolute CSS selector:

By.cssSelector("html > body > div.container > div.header > input#username") 

In the above example, the selector specifies the complete path from the HTML element to the input element with the id “username”.

Relative CSS Selectors: Relative selectors are created by considering the relationship between elements relative to each other. They identify elements based on their proximity to other elements or shared attributes. Relative selectors are more flexible and tend to be more resilient to changes in the HTML structure.

Example of a relative CSS selector:

By.cssSelector("div.container input#username")

In the above example, the selector locates the input element with the id “username” within a div element with the class “container”. It does not specify the complete path from the root element, making it more adaptable to changes.

Tag in CSS selector

By.cssSelector("input")

Tag name and attribute in CSS selector

By.cssSelector("input[id='username']")

Contains in CSS selector

By.cssSelector("input[id*='username']")

start-with in CSS selector

By.cssSelector("input[id^='username']")

ends-with in CSS selector

By.cssSelector("input[id$='username']")

‘or’ operator in CSS selector

By.cssSelector("input[id^='user'],input[id$='name']")

class and id in CSS selector

//'#' is used for id
By.cssSelector("input#username")
// '.' is used for class
By.cssSelector("input.username")

first-of-type in CSS selector

By.cssSelector("ul > li:first-of-type")

last-of-type

By.cssSelector("ul > li:last-of-type")

nth-of-type in CSS selector

By.cssSelector("ul > li:nth-of-type")

nth-child in CSS selector

By.cssSelector("ul > li:nth-child")

How to find siblings in CSS selector

By.cssSelector("li#usa + li")

not in CSS selector

By.cssSelector("li:not('val2')")

FAQ