CSS attribute selectors in Selenium Python

Introduction

CSS attribute selectors help find web elements by matching their attributes. This makes tests more flexible and reliable.

When you want to find an element with a specific attribute value, like a button with a certain name.

When elements don't have unique IDs but have unique attributes like data-test or aria-label.

When you want to select elements that contain a part of an attribute value.

When you want to test different states of elements by their attributes, like checked or disabled.

When you want to avoid brittle tests that break if element positions or classes change.

Syntax

Selenium Python

driver.find_element(By.CSS_SELECTOR, '[attribute="value"]')

Use square brackets [] to specify the attribute and its value.

You can match exact values or use special operators for partial matches.

Examples

Selects element with attribute type exactly equal to 'submit'.

Selenium Python

driver.find_element(By.CSS_SELECTOR, '[type="submit"]')

Selects element with attribute name starting with 'user'.

Selenium Python

driver.find_element(By.CSS_SELECTOR, '[name^="user"]')

Selects element with class attribute containing 'btn-primary' anywhere.

Selenium Python

driver.find_element(By.CSS_SELECTOR, '[class*="btn-primary"]')

Selects element with data-test attribute ending with '-button'.

Selenium Python

driver.find_element(By.CSS_SELECTOR, '[data-test$="-button"]')

Sample Program

This script opens a webpage with a custom checkbox. It uses CSS attribute selectors to find the label and checkbox input by their attributes. It prints the label text and checkbox state before and after clicking.

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
import time

options = Options()
options.add_argument('--headless')
service = Service()
driver = webdriver.Chrome(service=service, options=options)

try:
    driver.get('https://www.w3schools.com/howto/howto_css_custom_checkbox.asp')
    
    # Find checkbox label using attribute selector for 'for' attribute
    checkbox_label = driver.find_element(By.CSS_SELECTOR, 'label[for="myCheck"]')
    print('Label text:', checkbox_label.text)
    
    # Find checkbox input using attribute selector for type
    checkbox_input = driver.find_element(By.CSS_SELECTOR, 'input[type="checkbox"]')
    print('Checkbox is selected:', checkbox_input.is_selected())

    # Click checkbox to change state
    checkbox_input.click()
    print('Checkbox is selected after click:', checkbox_input.is_selected())

finally:
    driver.quit()

Important Notes

Attribute selectors are case-sensitive in HTML.

Use quotes around attribute values in selectors for best practice.

Combine attribute selectors with other selectors for precise targeting.

Summary

CSS attribute selectors help find elements by their attributes.

They make tests more stable and easier to maintain.

Use them to match exact or partial attribute values.