How to simulate HTML5 Drag and Drop in Selenium Webdriver?


We can simulate HTML5 drag and drop with Selenium webdriver. This is a feature that gets implemented if an element is dragged from its position and dropped on another element in another position.

Actions class in Selenium is used for taking care of this functionality. The drag_and_drop(source, target) is the available method under Actions class for carrying out this task. We have to import from selenium.webdriver import ActionChains to our code to use this method of Actions class.

Let us take the two elements and try to drag the first element on to the second element.

Example

from selenium.webdriver import ActionChains
from selenium import webdriver
   driver = webdriver.Chrome (executable_path="C:\chromedriver.exe")
   driver.implicitly_wait(0.5)
   driver.get("https://jqueryui.com/droppable/")
   driver.switch_to.frame(0)
   # identify source and destination elements
   s=driver.find_element_by_id("draggable")
   d=driver.find_element_by_id("droppable")
   # action object creation
   a = ActionChains(driver)
   a.drag_and_drop(s,d).perform()
driver.close()

Output

Updated on: 18-Sep-2020

461 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements