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.