How to find Element by CSS Selector using Selenium?

Find Element by CSS Selector

To find an HTML Element by CSS Selector using Selenium in Python, call find_element() method and pass By.CSS_SELECTOR as the first argument, and the CSS selector string (of the HTML Element we need to find) as the second argument.

find_element(By.CLASS_NAME, "css_selector_value")

If there are multiple HTML Elements with the same given class name, then find_element() returns the first HTML Element of those.

For example of CSS selector string, if we would like to get the first paragraph element whose class name is 'note' and the paragraph is inside a div, then the CSS selector string is 'div p.note'.

1. There is only one element by given CSS Selector

In the following example, we have an HTML page with some div elements. Of those one has a class name of "xyz".

In the Python program, we will find the HTML element whose tag name is div and class name is 'xyz' using CSS selector, and print that element to the console.

index.html

<html>
 <body>
  <p>Hello World!</p>
  <div>Read More</div>
  <div class="xyz">Report</div>
  <div>Next</div>
 </body>
</html>
Copy

Python Program (Selenium)

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.service import Service as ChromeService
from selenium.webdriver.common.by import By

# Setup chrome driver
driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()))

# Navigate to the url
driver.get('https://pythonexamples.org/tmp/selenium/index-52.html')

# Find element by CSS Selector
my_div = driver.find_element(By.CSS_SELECTOR, 'div.xyz')
print(my_div.get_attribute("outerHTML"))

# Close the driver
driver.quit()

Output

<div class="xyz">Report</div>

2. There are multiple elements by given CSS selector

Now, let us consider the scenario where there are multiple HTML Elements with a match for the given CSS selector string 'div.xyz'. We will use find_element() function to find the first element whose tag name is div class name is 'xyz'.

Even through there are two elements that match the given CSS selector, find_element() returns only the first element.

index.html

<html>
 <body>
  <p>Hello World!</p>
  <div class="xyz">Read More</div>
  <div class="xyz">Report</div>
  <div>Next</div>
 </body>
</html>
Copy

Python Program (Selenium)

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.service import Service as ChromeService
from selenium.webdriver.common.by import By

# Setup chrome driver
driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()))

# Navigate to the url
driver.get('https://pythonexamples.org/tmp/selenium/index-53.html')

# Find element by CSS Selector
my_div = driver.find_element(By.CSS_SELECTOR, 'div.xyz')
print(my_div.get_attribute("outerHTML"))

# Close the driver
driver.quit()

Output

<div class="xyz">Read More</div>

3. There is no element by given CSS selector

If there is no element by given CSS selector string, find_element() function raises NoSuchElementException.

In the following example, we have taken an HTML page with no elements by the tag name div, and class name "xyz". When we try to find element by the CSS selector string div.xyz using find_element() function, the function throws NoSuchElementException.

index.html

<html>
 <body>
  <p>Hello World!</p>
  <div>Read More</div>
  <div>Report</div>
  <div>Next</div>
 </body>
</html>
Copy

Python Program (Selenium)

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.service import Service as ChromeService
from selenium.webdriver.common.by import By

# Setup chrome driver
driver = webdriver.Chrome(service=ChromeService(ChromeDriverManager().install()))

# Navigate to the url
driver.get('https://pythonexamples.org/tmp/selenium/index-51.html')

# Find element by CSS Selector
my_div = driver.find_element(By.CSS_SELECTOR, 'div.xyz')
print(my_div.get_attribute("outerHTML"))

# Close the driver
driver.quit()

Output

    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":"div.xyz"}

Summary

In this Python Selenium tutorial, we learned how to find an element by CSS selector, in webpage, using Selenium.

Quiz on Selenium

Q1. What is a web driver in Selenium Python?

Not answered

Q2. What is the method used to find web elements in Selenium Python?

Not answered

Q3. What is the method used to interact with web elements in Selenium Python?

Not answered

Q4. Which of the following is not a commonly used assertion method in Selenium Python?

Not answered

Q5. What is the method used to clear the text from an input field in Selenium Python?

Not answered
Code copied to clipboard successfully 👍