Find element by CSS selector in Selenium Python

Introduction

Finding elements by CSS selector helps you pick exactly the part of a webpage you want to work with, like clicking a button or reading text.

You want to click a button with a specific style or class.

You need to read text inside a paragraph with a unique ID.

You want to fill a form field identified by its CSS class.

You want to check if a certain element is visible on the page.

You want to interact with nested elements inside a container.

Syntax

Selenium Python

element = driver.find_element(By.CSS_SELECTOR, "css_selector_here")

Replace "css_selector_here" with the actual CSS selector string.

Make sure to import 'By' from selenium.webdriver.common.by.

Examples

Finds the element with the ID 'submit-button'.

Selenium Python

element = driver.find_element(By.CSS_SELECTOR, "#submit-button")

Finds the element with both classes 'menu-item' and 'active'.

Selenium Python

element = driver.find_element(By.CSS_SELECTOR, ".menu-item.active")

Finds the first paragraph inside a div with class 'content'.

Selenium Python

element = driver.find_element(By.CSS_SELECTOR, "div.content > p:first-child")

Sample Program

This program opens a simple webpage with buttons and divs. It finds elements using CSS selectors and prints their text content.

Selenium Python

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

# Start the browser (make sure you have the driver installed)
driver = webdriver.Chrome()

# Open a simple webpage
html = '''
<html lang="en">
<head><title>Test Page</title></head>
<body>
  <button id="submit-button">Submit</button>
  <div class="menu-item active">Menu 1</div>
  <div class="menu-item">Menu 2</div>
  <div class="content">
    <p>First paragraph</p>
    <p>Second paragraph</p>
  </div>
</body>
</html>
'''

# Load the HTML content using data URL
import base64
encoded_html = base64.b64encode(html.encode('utf-8')).decode('utf-8')
url = f"data:text/html;base64,{encoded_html}"
driver.get(url)

# Find the submit button by CSS selector
submit_button = driver.find_element(By.CSS_SELECTOR, "#submit-button")
print(submit_button.text)  # Should print 'Submit'

# Find the active menu item
active_menu = driver.find_element(By.CSS_SELECTOR, ".menu-item.active")
print(active_menu.text)  # Should print 'Menu 1'

# Find the first paragraph inside content div
first_para = driver.find_element(By.CSS_SELECTOR, "div.content > p:first-child")
print(first_para.text)  # Should print 'First paragraph'

# Close the browser
driver.quit()

Important Notes

CSS selectors are very flexible and can target elements by ID (#id), class (.class), tag (tag), and combinations.

Always import 'By' from selenium.webdriver.common.by to use CSS selectors with find_element.

If the element is not found, Selenium will raise an exception, so consider handling that in real scripts.

Summary

Use driver.find_element(By.CSS_SELECTOR, "selector") to find elements by CSS selector.

CSS selectors let you pick elements by ID, class, tag, or their combinations.

This method helps you interact with specific parts of a webpage easily.

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