How to find Element by CSS Selector using Selenium?

Contents

Introduction
Scenario 1: HTML page with single element by given CSS Selector
Scenario 2: HTML page with multiple elements by given CSS selector
Scenario 3: HTML page with no element by given CSS selector
Summary

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'.

Scenario 1: HTML page with single 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>

Python Program (Selenium)

from selenium.webdriver.chrome.service import Service
from selenium import webdriver
from selenium.webdriver.common.by import By

service = Service(executable_path="/usr/local/bin/chromedriver")
#initialize web driver
with webdriver.Chrome(service=service) as driver:
    #navigate to the url
    driver.get('http://127.0.0.1:5500/localwebsite/index.html')
    #find element by css selector
    myDiv = driver.find_element(By.CSS_SELECTOR, 'div.xyz')
    print(myDiv.get_attribute("outerHTML"))

Output

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

Scenario 2: HTML page with 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>

Python Program (Selenium)

from selenium.webdriver.chrome.service import Service
from selenium import webdriver
from selenium.webdriver.common.by import By

service = Service(executable_path="/usr/local/bin/chromedriver")
#initialize web driver
with webdriver.Chrome(service=service) as driver:
    #navigate to the url
    driver.get('http://127.0.0.1:5500/localwebsite/index.html')
    #find element by css selector
    myDiv = driver.find_element(By.CSS_SELECTOR, 'div.xyz')
    print(myDiv.get_attribute("outerHTML"))

Output

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

Scenario 3: HTML page with 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>

Python Program (Selenium)

from selenium.webdriver.chrome.service import Service
from selenium import webdriver
from selenium.webdriver.common.by import By

service = Service(executable_path="/usr/local/bin/chromedriver")
#initialize web driver
with webdriver.Chrome(service=service) as driver:
    #navigate to the url
    driver.get('http://127.0.0.1:5500/localwebsite/index.html')
    #find element by css selector
    myDiv = driver.find_element(By.CSS_SELECTOR, 'div.xyz')
    print(myDiv.get_attribute("outerHTML"))

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 tutorial of Python Examples, we learned how to find an element by CSS selector, in webpage, using Selenium.