Selenium is a powerful tool for automating web browsers, and it supports drag-and-drop operations through its ActionChains class. Automating drag and drop is crucial for testing web applications that rely on interactive elements such as sortable lists, sliders, and draggable objects. This article will provide an in-depth guide on how to perform drag-and-drop operations in Selenium using Python
- Selenium Features
- Selenium Installation
- Selenium Locators
- XPath Fundamentals
- CSS Selectors Methods
- Different Browsers Execution
- find_element & find_elements
- Check Enabled Status
- Check Displayed Status
- Check Selected Status
- Selenium Waits
- Send_keys Method
- Click Method
- Get Text
- Get Attribute Value
- Get Current URL
- Forward, Back, Refresh
- Take Screenshot
- Handle Browser Tabs
- Handle iframe
- Mouse Hover
- Context-Click
- Drag & Drop
- Handle Alerts
- Handle Dropdown
- Execute Javascript
- Scroll To element
- Headless Mode Execution
- Chrome Options
- Keyboard Action
Setting Up Selenium for Drag and Drop
To perform a drag-and-drop action, we need to:
- Identify the source element (the element we want to drag).
- Identify the target element (the element where we want to drop the source element).
- Use ActionChains to execute the drag-and-drop operation.
Importing Required Libraries
from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.by import By
import timeLocating Elements for Drag and Drop
To successfully perform a drag-and-drop operation, we must locate the elements properly. The most common ways to locate elements in Selenium include:
- By ID:
driver.find_element(By.ID, "source-id") - By Class Name:
driver.find_element(By.CLASS_NAME, "source-class") - By XPath:
driver.find_element(By.XPATH, "//*[@id='source']")
Performing Drag and Drop in Selenium using ActionChains
The ActionChains class provides the drag_and_drop() method, which allows us to automate drag-and-drop interactions in web applications.
import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
# Initialize WebDriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(15)
driver.get("https://www.globalsqa.com/demo-site/draganddrop/")
# Switch to the iframe
iframe_element = driver.find_element(By.XPATH, "//iframe[@class='demo-frame lazyloaded']")
driver.switch_to.frame(iframe_element)
# Get source element
image_element = driver.find_element(By.XPATH, "//h5[text()='High Tatras']//parent::li")
# Get target element
trash_element = driver.find_element(By.ID, "trash")
# Create an ActionChains object
action = ActionChains(driver)
# Drag and drop image from one source to target element.
action.drag_and_drop(image_element, trash_element).perform()
time.sleep(5)
driver.quit()
Performing Drag and Drop Using Click and Hold Method
An alternative approach to executing drag and drop involves using click_and_hold(), move_to_element(), and release(). This method is useful when drag_and_drop() does not work due to JavaScript-based UI interactions.
import time
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.action_chains import ActionChains
# Initialize WebDriver
driver = webdriver.Chrome()
driver.maximize_window()
driver.implicitly_wait(15)
driver.get("https://www.globalsqa.com/demo-site/draganddrop/")
# Switch to the iframe
iframe_element = driver.find_element(By.XPATH, "//iframe[@class='demo-frame lazyloaded']")
driver.switch_to.frame(iframe_element)
# Get source element
image_element = driver.find_element(By.XPATH, "//h5[text()='High Tatras']//parent::li")
# Get target element
trash_element = driver.find_element(By.ID, "trash")
# Create an ActionChains object
action = ActionChains(driver)
# Perform drag and drop using an alternative method
action.click_and_hold(image_element).move_to_element(trash_element).release()
action.perform()
time.sleep(5)
driver.quit()