Find element by CSS selector in Selenium Python - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to find an element by its CSS selector.

Selenium Python

element = driver.find_element_by_css_selector([1])

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

A"#submit-button"

B"submit button"

C".submit-button"

D"submit-button"

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to add '#' before the id in the selector.

Using a class selector '.' instead of id selector '#'.

The CSS selector for an element with id 'submit-button' must start with '#'.

2fill in blank

medium

Complete the code to find an element with class 'menu-item' using CSS selector.

Selenium Python

element = driver.find_element_by_css_selector([1])

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

A"menu item"

B"#menu-item"

C"menu-item"

D".menu-item"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the class name without '.' prefix.

Using '#' which is for id selectors.

To select by class in CSS selector, use '.' before the class name.

3fill in blank

hard

Fix the error in the code to find an element by CSS selector for a button with class 'btn-primary'.

Selenium Python

element = driver.find_element_by_css_selector([1])

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

A".btn-primary"

B"btn-primary"

C"#btn-primary"

D"button.btn-primary"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the class name without '.' prefix.

Using id selector '#' instead of class selector '.'

The correct CSS selector for class 'btn-primary' is '.btn-primary'.

4fill in blank

hard

Fill both blanks to find an input element with type 'text' using CSS selector.

Selenium Python

element = driver.find_element_by_css_selector("input[[1]='[2]']")

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

Atype

Btext

Cusername

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping attribute name and value.

Using 'name' instead of 'type' for the first blank.

The selector input[type='text'] finds input elements with type attribute equal to 'text'.

5fill in blank

hard

Fill all three blanks to find a button element with class 'btn' and text 'Submit' using CSS selector.

Selenium Python

element = driver.find_element_by_css_selector("button.[1]:contains('[2]')")  # Note: :contains is not standard CSS
# Alternative: find by class and then check text separately
button = driver.find_element_by_css_selector("button.[3]")

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

Abtn

BSubmit

Dsubmit

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect class name without '.' prefix.

Trying to use :contains which is not supported in Selenium CSS selectors.

The CSS selector 'button.btn' selects button elements with class 'btn'. The :contains pseudo-class is not standard in CSS, so text matching is done separately.

Practice

1. Which method is used in Selenium Python to find an element by CSS selector?

easy

A. driver.find_element_by_name("selector")

B. driver.find_element(By.CSS_SELECTOR, "selector")

C. driver.find_element_by_xpath("selector")

D. driver.find_element_by_id("selector")

Solution

1. Step 1: Understand Selenium element finding methods

   Selenium provides different methods to find elements, including by ID, name, XPath, and CSS selector.

2. Step 2: Identify the correct method for CSS selector

   The method to find by CSS selector is driver.find_element(By.CSS_SELECTOR, "selector").

3. Final Answer:

   driver.find_element(By.CSS_SELECTOR, "selector") -> Option B

4. Quick Check:

   Find element by CSS selector = driver.find_element(By.CSS_SELECTOR, "selector") [OK]

Hint: Use By.CSS_SELECTOR with find_element for CSS selectors [OK]

Common Mistakes:

• Using find_element_by_id for CSS selectors
• Confusing XPath with CSS selector method
• Using deprecated find_element_by_* methods

2. Which of the following is the correct syntax to find an element with class name "btn-primary" using CSS selector in Selenium Python?

easy

A. driver.find_element(By.CSS_SELECTOR, ".btn-primary")

B. driver.find_element(By.CSS_SELECTOR, "#btn-primary")

C. driver.find_element(By.CSS_SELECTOR, "btn-primary")

D. driver.find_element(By.CSS_SELECTOR, "*btn-primary")

Solution

1. Step 1: Recall CSS selector for class names

   In CSS selectors, a class is selected by prefixing the class name with a dot (.)

2. Step 2: Match the correct syntax

   To select class "btn-primary", use ".btn-primary" inside find_element.

3. Final Answer:

   driver.find_element(By.CSS_SELECTOR, ".btn-primary") -> Option A

4. Quick Check:

   Class selector = .classname [OK]

Hint: Use dot (.) before class name in CSS selector [OK]

Common Mistakes:

• Using # instead of . for class selectors
• Omitting the dot before class name
• Using invalid wildcard * before class name

3. What will the following Selenium Python code select?

element = driver.find_element(By.CSS_SELECTOR, "div#main > ul.items > li.active")

medium

A. The first <li> element with class 'active' inside <ul> with class 'items' inside <div> with id 'main'

B. All <li> elements inside any <ul> inside any <div>

C. The <div> element with id 'main' only

D. The <ul> element with class 'items' only

Solution

1. Step 1: Break down the CSS selector

   The selector targets a
2. element with class 'active' that is a direct child of a <ul> with class 'items', which is a direct child of a <div> with id 'main'.

3. Step 2: Understand the element selected

   It selects the first matching
4. element with class 'active' inside the specified structure.

5. Final Answer:

   The first <li> element with class 'active' inside <ul> with class 'items' inside <div> with id 'main' -> Option A

6. Quick Check:

   CSS selector matches nested elements exactly [OK]

Hint: Read CSS selector from right to left for nested elements [OK]

Common Mistakes:

• Thinking it selects all <li> elements, not just with class 'active'
• Ignoring the direct child (>) combinators
• Confusing id (#) and class (.) selectors

4. Identify the error in this Selenium Python code snippet:

element = driver.find_element(By.CSS_SELECTOR, "#content .item[active]")

medium

A. The ID selector #content should be a class selector

B. The method find_element does not accept CSS selectors

C. The CSS selector should use double quotes inside single quotes

D. The attribute selector [active] is missing an equals sign and value

Solution

1. Step 1: Analyze the attribute selector syntax

   The selector uses [active] which means attribute 'active' must be present, but usually attributes require a value like [active="true"].

2. Step 2: Identify the correct attribute selector format

   To check for attribute presence only, [active] is valid, but if a value is expected, it must be [active="value"]. Here, likely a value is missing.

3. Final Answer:

   The attribute selector [active] is missing an equals sign and value -> Option D

4. Quick Check:

   Attribute selectors need correct syntax [OK]

Hint: Attribute selectors need = and value unless checking presence only [OK]

Common Mistakes:

• Assuming [active] always works without value
• Confusing ID (#) and class (.) selectors
• Using wrong quotes inside CSS selector string

5. You want to find all <input> elements inside a form with id "loginForm" that have both classes "input-field" and "required". Which CSS selector should you use with Selenium Python's find_elements method?

hard

A. "form#loginForm input#input-field#required"

B. "form#loginForm input .input-field .required"

C. "form#loginForm input.input-field.required"

D. "form#loginForm > input > .input-field > .required"

Solution

1. Step 1: Understand CSS selector for multiple classes

   To select elements with multiple classes, chain class selectors without spaces, e.g., .input-field.required.

2. Step 2: Combine with tag and parent selectors

   Use form#loginForm to select the form by id, then space to select descendants, then input.input-field.required for inputs with both classes.

3. Final Answer:

   "form#loginForm input.input-field.required" -> Option C

4. Quick Check:

   Multiple classes chained without spaces [OK]

Hint: Chain multiple classes without spaces in CSS selector [OK]

Common Mistakes:

• Adding spaces between multiple classes (selects descendants instead)
• Using multiple IDs on one element (invalid)
• Using child combinator (>) incorrectly for nested elements