CSS attribute selectors in Selenium Python - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a CSS attribute selector?

A CSS attribute selector matches HTML elements based on the presence or value of an attribute. It helps locate elements with specific attributes in tests.

beginner

How do you select an element with an attribute 'type' equal to 'submit' using CSS attribute selectors?

Use [type='submit'] to select elements where the attribute 'type' exactly equals 'submit'.

intermediate

What does the CSS selector [class^='btn'] select?

It selects elements whose class attribute value starts with 'btn'. The caret (^) means 'starts with'.

intermediate

Explain the difference between [attr*='value'] and [attr$='value'] selectors.

[attr*='value'] selects elements where the attribute contains 'value' anywhere. [attr$='value'] selects elements where the attribute ends with 'value'.

beginner

Why are CSS attribute selectors useful in Selenium tests?

They allow precise targeting of elements based on attributes, especially when IDs or classes are dynamic or missing. This improves test reliability.

Which CSS selector matches elements with an attribute 'data-test' that contains the word 'button'?

A [data-test^='button']

B [data-test$='button']

C [data-test*='button']

D [data-test='button']

The asterisk (*) means 'contains' anywhere in the attribute value.

What does the selector [name$='name'] select?

A Elements with a 'name' attribute ending with 'name'

B Elements with a 'name' attribute exactly equal to 'name'

C Elements with a 'name' attribute containing 'name' anywhere

D Elements with a 'name' attribute starting with 'name'

The dollar sign ($) means 'ends with' in attribute selectors.

Which selector matches elements with an attribute 'type' exactly equal to 'checkbox'?

A [type*='checkbox']

B [type='checkbox']

C [type^='checkbox']

D [type$='checkbox']

The equals sign (=) means exact match of the attribute value.

In Selenium Python, how would you locate elements with a 'placeholder' attribute containing 'email'?

A driver.find_element(By.CSS_SELECTOR, "[placeholder*='email']")

B driver.find_element(By.CSS_SELECTOR, "[placeholder^='email']")

C driver.find_element(By.CSS_SELECTOR, "[placeholder$='email']")

D driver.find_element(By.CSS_SELECTOR, "[placeholder='email']")

The '*=' operator selects elements where the attribute contains the given value anywhere.

Which attribute selector matches elements with an attribute 'class' that starts with 'nav-'?

A [class*='nav-']

B [class$='nav-']

C [class='nav-']

D [class^='nav-']

The caret (^) means 'starts with' in attribute selectors.

Describe how CSS attribute selectors can help you write better Selenium tests.

Think about how attributes can uniquely identify elements.

List and explain at least three different CSS attribute selector operators.

Remember the symbols and what part of the attribute value they match.

Practice

1. What does the CSS selector input[type='text'] select in Selenium?

easy

A. All input elements regardless of type

B. All elements with any attribute containing 'text'

C. All elements with class 'text'

D. All input elements with type attribute exactly equal to 'text'

Solution

1. Step 1: Understand the attribute selector syntax

   The selector input[type='text'] targets input tags with an attribute type exactly equal to 'text'.

2. Step 2: Match the selector meaning to options

   All input elements with type attribute exactly equal to 'text' correctly describes this exact match. Other options describe different or incorrect matches.

3. Final Answer:

   All input elements with type attribute exactly equal to 'text' -> Option D

4. Quick Check:

   Exact attribute match = C [OK]

Hint: Exact match uses [attr='value'] syntax [OK]

Common Mistakes:

• Confusing exact match with partial match
• Selecting wrong tag type
• Mixing class selectors with attribute selectors

2. Which of the following is the correct CSS selector to find elements with an attribute data-id that starts with 'user'?

easy

A. [data-id^='user']

B. [data-id*='user']

C. [data-id$='user']

D. [data-id='user']

Solution

1. Step 1: Recall CSS attribute selectors for matching start of value

   The caret symbol ^= means 'starts with' in CSS attribute selectors.

2. Step 2: Match the selector to the question

   [data-id^='user'] uses [data-id^='user'], which selects elements whose data-id attribute starts with 'user'.

3. Final Answer:

   [data-id^='user'] -> Option A

4. Quick Check:

   Starts with selector = B [OK]

Hint: Use ^= for 'starts with' attribute matching [OK]

Common Mistakes:

• Using *= instead of ^= for starts with
• Using $= which means ends with
• Using exact match = instead of partial

3. What will the following Selenium Python code print if the page has three <input> elements with name attributes: 'user1', 'user2', and 'admin'?

elements = driver.find_elements(By.CSS_SELECTOR, "input[name*='user']")
print(len(elements))

medium

A. 2

B. 3

C. 1

D. 0

Solution

1. Step 1: Understand the CSS selector input[name*='user']

   This selector finds input elements whose name attribute contains the substring 'user'.

2. Step 2: Count matching elements

   Given names 'user1', 'user2', and 'admin', only 'user1' and 'user2' contain 'user'. So, 2 elements match.

3. Final Answer:

   2 -> Option A

4. Quick Check:

   Substring match count = 2 [OK]

Hint: Use *= to find attributes containing substring [OK]

Common Mistakes:

• Counting all inputs instead of filtered ones
• Confusing starts with (^) and contains (*) selectors
• Assuming exact match instead of partial

4. You wrote this Selenium code but it throws an error:

element = driver.find_element(By.CSS_SELECTOR, "button[class^='submit']'")

What is the error and how to fix it?

medium

A. Wrong attribute selector; use *= instead of ^=

B. Extra single quote at the end; remove it to fix

C. Missing tag name before attribute selector

D. CSS selector cannot use ^ for attribute matching

Solution

1. Step 1: Inspect the CSS selector string syntax

   The selector ends with an extra single quote after the closing double quote: "button[class^='submit']'". This causes a syntax error.

2. Step 2: Correct the string by removing the extra quote

   Removing the extra single quote at the end fixes the syntax: "button[class^='submit']".

3. Final Answer:

   Extra single quote at the end; remove it to fix -> Option B

4. Quick Check:

   Check quotes balance = A [OK]

Hint: Check for balanced quotes in selectors [OK]

Common Mistakes:

• Ignoring syntax errors caused by quotes
• Changing correct attribute selectors unnecessarily
• Assuming CSS does not support ^= selector

5. You want to select all <a> tags whose href attribute ends with '.pdf' or '.docx' using a single CSS selector in Selenium. Which selector is correct?

hard

A. a[href*='.pdf' or '.docx']

B. a[href$='.pdf' || href$='.docx']

C. a[href$='.pdf'], a[href$='.docx']

D. a[href$='.pdf'][href$='.docx']

Solution

1. Step 1: Understand CSS selector for multiple attribute matches

   To select elements matching either condition, use a comma to separate selectors: a[href$='.pdf'], a[href$='.docx'].

2. Step 2: Analyze other options for correctness

   a[href$='.pdf' || href$='.docx'] uses invalid syntax with || inside attribute selector. a[href$='.pdf'][href$='.docx'] requires both endings simultaneously, impossible. a[href*='.pdf' or '.docx'] uses invalid syntax with 'or'.

3. Final Answer:

   a[href$='.pdf'], a[href$='.docx'] -> Option C

4. Quick Check:

   Use comma to combine selectors = D [OK]

Hint: Combine selectors with comma for OR conditions [OK]

Common Mistakes:

• Using logical operators inside attribute selectors
• Trying to combine multiple attribute endings in one selector without comma
• Assuming multiple attribute selectors mean OR instead of AND