Introduction to Selenium Python: Mastering Drag and Drop Interactions

Welcome to our educational series on leveraging Selenium with Python for automated web testing. Today, we’re diving into a fundamental yet critical aspect of web interaction automation: handling drag-and-drop functionalities. For this tutorial, we’ll use the interactive learning platform Practice Automated Testing to demonstrate retrieving and manipulating web elements, focusing specifically on drag-and-drop actions. This skill is essential for testing web applications that require user interactions such as dragging items into a shopping cart, rearranging lists, or moving objects across the screen.

Setting Up the Environment

First, ensure you have Python installed on your system. Then, you will need to install the Selenium package along with WebDriver Manager, which simplifies the management of binary drivers for different web browsers. You can install these using pip:

pip install selenium webdriver-manager

The following code snippet sets up the Chrome WebDriver, which is necessary for launching and controlling your browser programmatically:

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.chrome.service import Service

service = Service(ChromeDriverManager().install())
driver = webdriver.Chrome(service=service)

Navigating to the Test Page

Our target for today’s lesson is a specific interaction on the Practice Automated Testing website. We’ll navigate to a page designed to practice hover-to-click button interactions:

driver.get("https://www.practiceautomatedtesting.com/webelements/HoverToClickButton")
print("Opened practiceautomated testing")

Identifying Web Elements

Before interacting with web elements, we first need to locate them. Selenium offers various strategies to find elements, such as by ID, XPath, CSS selectors, and more. In our example, we use the CSS selector strategy:

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

hover_element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, '[class="HoverToClickButton_hoverText__wtIgh"]'))
)

Performing Drag and Drop

Although our primary focus is on drag-and-drop actions, the provided example showcases how to perform mouse hover actions, which are somewhat related. Hover actions are a precursor to many drag-and-drop scenarios, where you first need to hover over an element to reveal additional options or drag handles.

In Selenium, ActionChains are used to perform complex actions like drag-and-drop:

from selenium.webdriver.common.action_chains import ActionChains

actions = ActionChains(driver)
actions.move_to_element(hover_element).perform()

This code moves the mouse over the hover_element, simulating a hover action. For actual drag-and-drop actions, you would use actions.drag_and_drop(source, target).perform(), where source is the element you want to drag, and target is the destination element.

Revealing Hidden Elements

Our example demonstrates how to interact with elements that become visible only after certain actions, such as hovering:

hidden_button = WebDriverWait(driver, 10).until(
    EC.visibility_of_element_located((By.CSS_SELECTOR, '[class="HoverToClickButton_hiddenButton__WL3-l"'))
)

if hidden_button.is_displayed():
        print("OK: Hidden button is now visible.")

Wrapping Up

After performing the necessary interactions, don’t forget to close the browser:

driver.quit()

This tutorial covered the basics of setting up Selenium with Python, navigating to a page, identifying web elements, and performing hover actions to reveal hidden elements. While we focused on hover actions due to the context provided, understanding these concepts is crucial for mastering more complex interactions like drag and drop. For practicing drag-and-drop specifically, look for web pages or build your own test pages that include such functionality, and apply the ActionChains methods discussed to interact with those elements.

Remember, mastering Selenium automation takes practice. Experiment with different web elements and interactions to build your confidence and broaden your testing capabilities. Happy testing!