CSS Selectors in Selenium

CSS selectors are one of the most powerful and efficient ways to locate web elements in Selenium. They provide a concise and reliable way to select elements on a web page based on their attributes.

ID Selector:

The ID selector is used to select an element with a specific ID attribute. The selector starts with the "#" symbol followed by the ID value.

Example CSS Selector: #myElement

This selector selects an element with the ID "myElement". To use this selector in Selenium, you can use the By.cssSelector() method as follows:

WebElement element = driver.findElement(By.cssSelector("#myElement"))

Class Selector:

The class selector is used to select elements with a specific class attribute. The selector starts with the "." symbol followed by the class name.

Example CSS Selector: .myClass

This selector selects all elements with the class name "myClass". To use this selector in Selenium, you can use the By.cssSelector() method as follows:

List<WebElement> elements = driver.findElements(By.cssSelector(".myClass"));

Attribute Selector:

The attribute selector is used to select elements with a specific attribute value. The selector starts with the attribute name in square brackets followed by the attribute value.

Example CSS Selector: [name='myName']

This selector selects all elements with the "name" attribute value of "myName". To use this selector in Selenium, you can use the By.cssSelector() method as follows:

WebElement element = driver.findElement(By.cssSelector("[name='myName']"));

Element Selector:

The element selector is used to select elements of a specific type. The selector uses the name of the HTML element as the selector.

Example CSS Selector: input

This selector selects all input elements. To use this selector in Selenium, you can use the By.cssSelector() method as follows:

List<WebElement> inputs = driver.findElements(By.cssSelector("input"));

Descendant Selector:

The descendant selector is used to select an element that is a descendant of another element. The selector uses a space to separate the ancestor and descendant elements.

Example CSS Selector: div p

This selector selects all "p" elements that are descendants of "div" elements. To use this selector in Selenium, you can use the By.cssSelector() method as follows:

WebElement element = driver.findElement(By.cssSelector("div p"));

Child Selector:

The child selector is used to select an element that is a direct child of another element. The selector uses the ">" symbol to separate the parent and child elements.

Example CSS Selector: div > p

This selector selects all "p" elements that are direct children of "div" elements. To use this selector in Selenium, you can use the By.cssSelector() method as follows:

WebElement element = driver.findElement(By.cssSelector("div > p"));

These are just a few examples of how CSS selectors can be used in Selenium. Using CSS selectors can help you write more efficient and reliable test scripts. Remember to use browser dev tools to find the CSS selectors of the elements you want to interact with.