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