0
0
Selenium Pythontesting~5 mins

Find element by CSS selector in Selenium Python

Choose your learning style9 modes available
LearnWhyDeepTraceTryChallengeAutomateRecallFrame
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()
OutputSuccess
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.