CSS Selector in Selenium

Introduction

When automating web applications with Selenium, it is often necessary to select and interact with specific elements on a web page. For instance, you could have to click a button to submit a form, enter information into a text box, or review the wording in a paragraph. CSS selectors in Selenium come in handy in this situation.

Based on their properties or class names, CSS selectors in Selenium are patterns that are used to choose particular HTML components from a web page. In Selenium, you can quickly target particular elements and carry out operations on them by using CSS selectors. For instance, you can enter user input into a text box by selecting it with a class selector or click a button by selecting it with an ID picker.

What is a CSS Selector?

A CSS selector is a pattern used to select specific HTML elements on a web page based on their attributes or class names. Cascading Style Sheets, or CSS for short, is a language used to describe the look and feel of a web page. Selectors are a crucial component of CSS because they let you apply styles to particular items on a page.

Elements on a web page are located using CSS selectors in Selenium so that automated tests can interact with them. A CSS selector can be used, for instance, to find a button and click it, or to find a text field and type content into it. CSS selector in Selenium offers a flexible and potent method for interacting with web pages, enabling developers and testers to automate tedious operations and raise the calibre of their web applications.

Types of CSS Selectors

There are several types of CSS selectors in Selenium that can be used to select and manipulate elements on a web page. These include:

ID

One of the most used CSS selectors in Selenium is the ID selector. By using this kind of selector, you can choose an element based on its distinctive ID attribute. An HTML element's ID attribute is a special identifier that is used to set it apart from other elements on the same page. The ID selector makes it simple to target particular items and apply Selenium's techniques to them.

Example

To use the ID CSS selector in Selenium, we need to pass the ID name preceded by a hash symbol # to the find_element_by_css_selector() method. For example, consider the following HTML code snippet:

Suppose we want to select the <h1> element using the ID selector. We can do this by passing the ID name my-div to the find_element_by_css_selector() method as shown below:

Explanation

In the example above, we first created a new instance of the Firefox driver and navigated to the webpage containing the HTML code snippet. We then used the ID selector #my-div h1 to select the <h1> element inside the <div> element with an ID attribute equal to my-div.

Class

Another popular CSS selector in Selenium is the class selector. By using this kind of selector, you can choose an element based on its class attribute. A non-unique identifier that may be applied to numerous HTML elements and is used to group elements together is called a class attribute. We may quickly target several components with the same class name and manipulate them using Selenium's capabilities by utilizing the class selector.

Example

To use the class selector in Selenium, we need to pass the class name preceded by a period (.) to the find_element_by_css_selector() method. For example, consider the following HTML code snippet:

Suppose we want to select all the <p> elements inside the <div> elements with the class name my-class. We can do this by passing the class name .my-class p to the find_elements_by_css_selector() method as shown below:

Explanation

In the example above, we first created a new instance of the Firefox driver and navigated to the webpage containing the HTML code snippet. We then used the class selector .my-class p to select all the <p> elements inside the <div> elements with the class name my-class.

Attribute

Attribute selectors are used to select elements based on their attribute values. This CSS selector in Selenium is very helpful when the target items lack any kind of distinctive identifiers, such as an ID or a class name. In Selenium, we can use attribute selectors to choose elements based on any attribute, including href, src, data-*, title, name, and value.

Example

To use attribute selectors in Selenium, we need to specify the attribute name and its value using square brackets [] and an optional match operator like=, *=, ^=, $= and ~=, depending on the type of matching we want to perform. For example, consider the following HTML code snippet:

Suppose we want to select the second anchor tag with the class name external. We can do this using the attribute selector [attribute_name=attribute_value] as shown below:

Explanation

In the example above, we first created a new instance of the Firefox driver and navigated to the webpage containing the HTML code snippet. We then used the attribute selector a[class=external] to select the second anchor tag with the class name external. Finally, we printed the href attribute of the selected element using the get_attribute() method.

Sub-String

Substring selectors, also known as attribute values contain selectors, are used to select elements based on a substring contained within an attribute value. We can use this CSS selector in Selenium to select elements whose attribute value contains a specific substring.

Example

To use substring selectors in Selenium, we use the attribute selector [attribute_name*=substring] where attribute_name is the name of the attribute we want to select and substring is the substring we want to match. The *= operator specifies that the attribute value must contain the given substring. Let's consider the following HTML code snippet as an example:

Suppose we want to select all the input elements that have a name containing the substring user. We can do this using the substring selector [name*=user] as shown below:

Explanation

In the example above, we first created a new instance of the Firefox driver and navigated to the webpage containing the HTML code snippet. We then used the substring selector input[name*=user] to select all input elements with a name containing the substring user. Finally, we printed the type attribute of the selected elements using a loop and the get_attribute() method.

We can also use other match operators like ^= to select elements whose attribute value starts with a certain substring,$= to select elements whose attribute value ends with a certain substring, and |= to select elements whose attribute value is a hyphen-separated list of words that start with a certain substring.

Inner String

The inner string selector is used to select elements based on the text contained within them. This is particularly useful when we want to select elements that contain specific keywords or phrases. This CSS Selector in Selenium is helpful when we need to find a tag based on the String inside the tag.

Example

Let's consider the following HTML code snippet as an example

Here's how we can use the inner string selector in Selenium to locate the h1 class using the inner string in the tag.

Explanation

In this example, we first create a new instance of the Chrome browser using Selenium's web driver module. We then navigate to a sample webpage at https://example.com. Next, we use the inner string selector to locate the h1 element containing the text "Welcome to my website". The syntax for the inner string selector is :contains('text'), where text is the string we want to search for. Finally, we print the text content of the located element using the text attribute of the element object. We then close the browser using the quit() method of the driver object.

It's important to keep in mind that not all web browsers support the inner string selector, so it might not always be the ideal option for finding elements on a webpage. When alternative selectors are unavailable or impractical to employ, they might nonetheless be a helpful tool.