CSS attribute selectors in Selenium Python - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select an element with attribute type equal to submit using CSS selector.

Selenium Python

element = driver.find_element(By.CSS_SELECTOR, "input[[1]='submit']")

Drag options to blanks, or click blank then click option'

Atype

Bclass

Cid

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'class' or 'id' instead of 'type' in the selector.

Forgetting the quotes around the attribute value.

The CSS attribute selector syntax is [attribute='value']. Here, to select input elements with type='submit', we use [type='submit'].

2fill in blank

medium

Complete the code to select all elements whose data-test attribute contains the word button.

Selenium Python

elements = driver.find_elements(By.CSS_SELECTOR, "[data-test[1]='button']")

Drag options to blanks, or click blank then click option'

A^

B~

C|

D*

Attempts:

3 left

💡 Hint

Common Mistakes

Using '*=' which matches substring anywhere, not whole words.

Using '=' which matches exact value only.

The '~=' selector matches elements whose attribute value is a space-separated list of words, one of which is exactly the given word. So [data-test~='button'] matches elements with 'button' as a word in data-test.

3fill in blank

hard

Fix the error in the CSS selector to select elements with href attribute starting with https.

Selenium Python

link = driver.find_element(By.CSS_SELECTOR, "a[[1]^='https']")

Drag options to blanks, or click blank then click option'

Aclass

Bsrc

Chref

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'src' or 'class' instead of 'href'.

Using '=' instead of '^=' operator.

To select elements with href attribute starting with 'https', use the ^= operator with the attribute name 'href'.

4fill in blank

hard

Fill both blanks to select elements with title attribute ending with .pdf and containing download anywhere in the attribute value.

Selenium Python

elements = driver.find_elements(By.CSS_SELECTOR, "[[1]$='.pdf'][[2]*='download']")

Drag options to blanks, or click blank then click option'

Atitle

Bhref

Dclass

Attempts:

3 left

💡 Hint

Common Mistakes

Using different attributes for the two selectors.

Mixing up $= and *= operators.

The $= operator matches attribute values ending with the given string. The *= operator matches attribute values containing the given substring. Both apply to the 'title' attribute here.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension that maps each data-id attribute value to the text of elements whose class attribute contains active.

Selenium Python

result = { [1]: element.text for element in driver.find_elements(By.CSS_SELECTOR, "[class[2]='active']") if element.get_attribute([3]) is not None }

Drag options to blanks, or click blank then click option'

Aelement.get_attribute('data-id')

B'class'

C'data-id'

D*=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '=' instead of '*=' in the CSS selector.

Using wrong attribute names in get_attribute or selector.

We use element.get_attribute('data-id') as the key. The class attribute selector uses '*=' to find elements whose class contains 'active'. The attribute name for get_attribute is 'data-id'.