Locating Elements on a Webpage

Selenium Find Element vs Find Elements

When navigating websites, you’ll often need to find specific elements. In Selenium, find element and find elements do exactly as you might expect:

• find_element: Locates a single element on the page. If the element is not found, it raises a NoSuchElementException.
• find_elements: Locates multiple elements matching the criteria and returns them as a list. If no elements are found, it returns an empty list.

What you’re searching or scraping for will generally dictate which option you use. For example, if you’re looking for a unique header, link or even a button, then you should use find_element. On the other hand, if you’re looking for something like product listings, image elements or even table rows, you need to use find_elements.

Now you know the different approaches, we’ll explore the key elements to search for in Selenium: find element by ID, find element by Class, find element by CSS and find element by XPath.

Find Element by ID

The ID attribute is designed to uniquely identify an element within the HTML of a webpage. It is one of the most straightforward and efficient ways to locate elements because IDs are unique by definition. IDs are frequently used for critical webpage elements such as forms, buttons, and headers, ensuring they are easy to target.

from selenium import webdriver

# Initialize the browser
driver = webdriver.Chrome()

# Open the webpage
driver.get("https://example.com")

# Locate element by ID
element = driver.find_element("id", "exampleId")

# Perform actions with the element
print(element.text)

# Close the browser
driver.quit()

Find Element by Class Name

The class attribute is used to group elements with similar styles or behaviors. While classes are not unique, they allow you to target groups of elements that share a common functionality or appearance, such as menu items, buttons, or labels.

# Locate element by class name
element = driver.find_element("class name", "exampleClass")

# Locate multiple elements
elements = driver.find_elements("class name", "exampleClass")

# Loop through elements and print text
for el in elements:
    print(el.text)

Installing ChromeDriver:

CSS Selectors are a powerful way to locate elements based on their style rules. They support complex and precise queries, such as targeting elements based on their hierarchy, attributes, or relationships with other elements. CSS Selectors are highly versatile and allow you to pinpoint almost any element on a page.

If you want to learn more, you can take our course on CSS Selectors. Otherwise, you can use the following code.

# Locate using CSS Selector
element = driver.find_element("css selector", ".exampleClass > .childClass")

You can also use this approach to locate buttons with specific attributes:

button = driver.find_element("css selector", 
"button[data-action='submit']")

Find Element by XPath

XPath (XML Path Language) is a query language that can navigate through elements and attributes in an XML or HTML document. Like CSS Selectors, our XPath scraping course is a useful refresher.

If you’re ready to proceed, XPath is the most versatile locator in Selenium but can be complex to use effectively. XPath is especially helpful for locating elements without reliable IDs or classes.

# Locate using XPath
element = driver.find_element("xpath", "//div[@id='exampleId']//a[text()='Click here']")

XPath also supports relative paths:

# Locate the first link inside a specific div
link = driver.find_element("xpath", "//div[@class='menu']//a[1]")

‍