Open In App

How can Selenium select each div separately that have the same class?

Last Updated : 22 Aug, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

When working with Selenium, there may be situations where you need to interact with multiple elements on a webpage that share the same class. For example, consider a web page where several div elements have the same class, and you need to perform operations like clicking, retrieving text, or interacting with them one by one.

In this article, we'll cover how to select and interact with each div element separately that shares the same class in Selenium using Python.

Prerequisites

Before you begin, make sure you have installed the following:

  1. Python (version 3.x)
  2. Selenium library (pip install selenium)
  3. WebDriver for your preferred browser (e.g., Chrome Driver)

Example Scenario

Suppose we have the following HTML code snippet with multiple div elements that share the same class sample-div:

HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="sample-div">Div 1 Content</div>
<div class="sample-div">Div 2 Content</div>
<div class="sample-div">Div 3 Content</div>
</body>
</html>

Our goal is to iterate over each div element and perform actions on them

Approach

The steps to achieve this are:

  1. Identify the elements with the same class using find_elements_by_class_name() method.
  2. Store the identified elements in a list.
  3. Use a loop to iterate through each element and perform actions.

Code Implementation

Here is the Python code using Selenium to select and interact with each div element separately.

Python
from selenium import webdriver
from selenium.webdriver.common.by import By
import time

# Initialize the WebDriver (assuming you are using Chrome)
driver = webdriver.Chrome()

# Open the target webpage
driver.get('http://localhost:3000/')

# Find all elements with the class 'sample-div'
div_elements = driver.find_elements(By.CLASS_NAME, 'sample-div')

# Iterate over each div element and perform actions
for index, div in enumerate(div_elements):
    print(f"Div {index + 1} Text: {div.text}")  # Print the text of each div
    # You can also perform other actions like clicking, sending keys, etc.
    # div.click()  # Example action

# Wait for a few seconds to see the results (useful for observation)
time.sleep(5)

# Close the browser
driver.quit()

Explanation

  1. Initialization: We initialize the WebDriver and open the desired webpage using the get() method.
  2. Finding Elements: We use find_elements() with By.CLASS_NAME to select all div elements that have the class sample-div. This method returns a list of WebElements.
  3. Iterating and Performing Actions: We then loop through this list, printing the text content of each div. You can replace print() with other actions like click(), send_keys(), etc., depending on what you need to do with the elements.

Example Output

Assume the webpage contains three div elements with the class sample-div. The output in the console would be:

output_multiple_div
Console output for multiple div

Conclusion

In this article, we demonstrated how to interact with multiple elements that share the same class using Selenium in Python. By using find_elements() to select all matching elements and then iterating over them, you can perform various operations on each element separately. This approach is widely used when dealing with web pages containing repetitive structures, like lists, tables, or collections of similar items.

For more advanced operations, you can combine this technique with other Selenium functionalities like waiting for elements to load, handling dynamic content, or interacting with forms.


Article Tags :

Similar Reads