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