Angular drag & drop with HTML5 not working through Selenium and Python

Question

My code does not working on demo AngularJS Drag and Drop list: http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
import time
import os

driver = webdriver.Firefox()
driver.get("http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple")
time.sleep(2)
source_element = driver.find_element_by_xpath('/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[1]/div/div[2]/ul/li[1]')
dest_element = driver.find_element_by_xpath('/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[2]/div/div[2]/ul/li[3]')

actions = ActionChains(driver)
actions.drag_and_drop(source_element, dest_element)
actions.perform()
time.sleep(10)
os.system("taskkill /im firefox.exe /f")

I try many solutions, but it is not working. By my opinion, problem is in "drop" action.

Answer 1

The elements on the webpage http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple are html5angular elements. I took your code, made a couple of simple modifications and executed the drag_and_drop functionality through firefox and chrome and here are the observations:

Firefox

• Code Block:

  from selenium import webdriver
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.support import expected_conditions as EC
  from selenium.webdriver.common.action_chains import ActionChains
  
  driver = webdriver.Firefox(executable_path=r'C:\Utility\BrowserDrivers\geckodriver.exe')
  driver.get("http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple")
  element = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//h1[text()='Demo: Simple Lists']")))
  driver.execute_script("return arguments[0].scrollIntoView(true);", element)
  source_element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//ul[@dnd-list='list']/li[normalize-space()='Item A1']")))
  dest_element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//ul[@dnd-list='list']/li[normalize-space()='Item B2']")))
  ActionChains(driver).drag_and_drop(source_element, dest_element).perform()
  

• Observation: Element with text as Item A1 is successfully dragged but is never dropped. This issue can be reproduced using Chrome / ChromeDriver as well.

• Browser Snapshot:

---

Conclusion

This is a known issue with Selenium and was discussed in details within the thread HTML5 Drag and Drop with Selenium Webdriver

---

Alternative

For a working solution you can follow the discussion in How to simulate HTML5 Drag and Drop in Selenium Webdriver?

---

Outro

You can find a detailed discussion in the chromedriver issue list HTML5 drag and drop is not working which is currently blocked by the chromium issue Drag and drop not working through chrome debug protocol