Find element by CSS selector in Selenium Python - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Find element using CSS selector syntax

What is the output of this code snippet when trying to find an element with class button-primary?

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By

browser = webdriver.Chrome()
browser.get('https://example.com')

button = browser.find_element(By.CSS_SELECTOR, '.button-primary')
print(button.tag_name)
browser.quit()

A Prints the tag name of the first element with class 'button-primary', e.g., 'button'

B Raises a SyntaxError due to incorrect CSS selector syntax

C Raises a NoSuchElementException if no element with class 'button-primary' is found

D Prints the text content of the element instead of the tag name

💡 Hint

Remember that find_element returns the first matching element and By.CSS_SELECTOR expects a valid CSS selector string.

The code uses Selenium's find_element with By.CSS_SELECTOR to find the first element with class 'button-primary'. It then prints the tag name of that element. If the element exists, it prints the tag name like 'button'.

🧠 Conceptual

intermediate

Understanding CSS selector specificity in Selenium

Which CSS selector will find all <input> elements with attribute type='text' inside a form with id loginForm?

A #loginForm input[type='text']

B input#loginForm[type='text']

C input[type='text'] > #loginForm

D form input[type=text]#loginForm

💡 Hint

Think about how CSS selectors target elements by id, tag, and attribute.

Option A correctly selects all input elements with type='text' inside the element with id loginForm. The id selector #loginForm targets the form, then input[type='text'] selects inputs with that attribute inside it.

❓ rendering

advanced

What happens when using an invalid CSS selector in Selenium?

Consider this code snippet trying to find an element with an invalid CSS selector. What error will Selenium raise?

Selenium Python

from selenium import webdriver
from selenium.webdriver.common.by import By

browser = webdriver.Chrome()
browser.get('https://example.com')

browser.find_element(By.CSS_SELECTOR, 'div#main > > p')
browser.quit()

A selenium.common.exceptions.ElementNotInteractableException

B selenium.common.exceptions.InvalidSelectorException

C No error, returns None

D selenium.common.exceptions.NoSuchElementException

💡 Hint

Invalid CSS syntax causes a specific Selenium exception.

The selector 'div#main > > p' is invalid CSS syntax due to consecutive '>' combinators. Selenium raises InvalidSelectorException when the CSS selector is malformed.

❓ selector

advanced

Selecting nested elements with CSS selectors in Selenium

Which CSS selector correctly finds all <li> elements that are direct children of <ul> with class menu?

A ul > .menu li

B ul.menu li

C li > ul.menu

D ul.menu > li

💡 Hint

The '>' combinator selects direct children only.

Option D uses 'ul.menu > li' which selects li elements that are direct children of ul elements with class 'menu'. Option D selects all li descendants, not just direct children.

❓ accessibility

expert

Using CSS selectors to find elements with ARIA attributes in Selenium

Which CSS selector will find all elements with the ARIA role button that are also focusable (have tabindex='0')?

A [role=button][tabindex=0]

B [aria-role='button'][tabindex='0']

C [role='button'][tabindex='0']

D [role='button'] > [tabindex='0']

💡 Hint

ARIA roles use the attribute 'role', not 'aria-role'. Also, attribute values should be quoted strings.

Option C correctly selects elements with attribute role='button' and tabindex='0'. Option C uses a wrong attribute name 'aria-role'. Option C misses quotes around attribute values which is invalid in CSS selectors. Option C selects children with tabindex='0' inside elements with role='button', not the same element.