1. Introduction
Selenium offers plenty of methods to locate elements on a webpage, and we often need to find an element based on its attribute.
Attributes are additional pieces of information that can be added to provide more context or functionality. They can be broadly categorized into two types:
- Standard Attributes: These attributes are predefined and recognized by browsers. Examples include id, class, src, href, alt, title, etc. Standard attributes have predefined meanings and are widely used across different HTML elements.
- Custom Attributes: Custom attributes are those that are not predefined by HTML specifications but are often created by developers for their specific needs. These attributes typically start with “data-” followed by a descriptive name. For example, data-id, data-toggle, data-target, etc. Custom attributes are useful for storing additional information or metadata related to an element, and they are commonly used in web development to pass data between HTML and JavaScript.
In this tutorial, we’ll dive into using CSS to pinpoint elements on a web page. We’ll explore finding elements by their attribute name or description, with options for both full and partial matches. By the end, we’ll be masters at finding any element on a page with ease!
2. Find Element by Attribute Name
One of the simplest scenarios is finding elements based on the presence of a specific attribute. Consider a webpage with multiple buttons, each tagged with a custom attribute called “data-action.” Now, let’s say we want to locate all buttons on the page with this attribute. In such cases, we can use [attribute] locator:
driver.findElements(By.cssSelector("[data-action]"));
In the code above, the [data-action] will select all elements on a page with a target attribute, and we’ll receive a list of WebElements.
3. Find Element by Attribute Value
When we need to locate a concrete element with a unique attribute value, we can use the strict match variant of the CSS locator [attribute=value]. This method allows us to find elements with exact attribute value matches.
Let’s proceed with our web page where buttons have a “data-action” attribute, each assigned a distinct action value. For instance, data-action=’delete’, data-action=’edit’, and so forth. If we want to locate buttons with a particular action, such as “delete”, we can employ the attribute selector with an exact match:
driver.findElement(By.cssSelector("[data-action='delete']"));
4. Find Element by Starting Attribute Value
In situations where the exact attribute value may vary but starts from a specific substring, we can use another approach.
Let’s consider a scenario where our application has many pop-ups, each featuring an “Accept” button with a custom attribute named “data-action”. These buttons may have distinct identifiers appended after a shared prefix, such as “btn_accept_user_pop_up”, “btn_accept_document_pop_up”, and so forth. We can write a universal locator in the base class using [attribute^=value] locator:
driver.findElement(By.cssSelector("[data-action^='btn_accept']"));
This locator will find an element where the “data-action” attribute value starts from “btn_accept”, so we can write a base class with a universal “Accept” button locator for each pop-up.
5. Find the Element by Ending the Attribute Value
Similarly, when our attribute value ends with a specific suffix, let’s use [attribute$=value]. Imagine that we have a list of URLs on a page and want to get all PDF document references:
driver.findElements(By.cssSelector("[href$='.pdf']"));
In this example, the driver will find all elements where “href” attribute value ends with “.pdf”.
6. Find Element by Part of Attribute Value
When we’re not sure about our attribute prefix or suffix, there will be helpful a contains approach [attribute*=value]. Let’s consider a scenario where we want to get all elements with a reference to a specific resource path:
driver.findElements(By.cssSelector("[href*='archive/documents']"));
In this example, we’ll receive all elements with reference to a document from the archive folder.
7. Find Element by Specific Class
We can locate an element by using its class as an attribute. This is a common technique, especially when checking if an element is enabled, disabled, or has gained some other capability reflected in its class. Consider that we want to find a disabled button:
<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Accept</a>
This time, let’s use a strict match for the role and contain a match for a class:
driver.findElement(By.cssSelector("[role='button'][class*='disabled']"));
In this example, “class” was used as attribute locator [attribute*=value] and detected in value “btn btn-primary btn-lg disabled” a “disabled” part.
8. Conclusion
In this tutorial, we’ve explored different ways to locate elements based on their attributes.
We’ve categorized attributes into two main types: standard, which are recognized by browsers and have predefined meanings, and custom, which are created by developers to fulfill specific requirements.
Using CSS selectors, we’ve learned how to efficiently find elements based on attribute names, values, prefixes, suffixes, or even substrings. Understanding these methods gives us powerful tools to locate elements easily, making our automation tasks smoother and more efficient.
As always, all code examples are available over on GitHub.
