Python. Selenium. drag_and_drop error 'AttributeError: move_to requires a WebElement'

Question

Tell me please, what am I doing wrong? I try to drag and drop through Selenium, but every time I come across an error "AttributeError: move_to requires a WebElement"

Here is my code:

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

chromedriver = '/usr/local/bin/chromedriver'

driver = webdriver.Chrome(chromedriver)
driver.get('http://www.dhtmlgoodies.com/scripts/drag-drop-custom/demo-drag-drop-3.html')

source = driver.find_elements_by_xpath('//*[@id="box3"]')
target = driver.find_elements_by_xpath('//*[@id="box103"]')

action = ActionChains(driver)
action.drag_and_drop(source, target).perform()

I also tried, like this:

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

chromedriver = '/usr/local/bin/chromedriver'

driver = webdriver.Chrome(chromedriver)
driver.get('http://www.dhtmlgoodies.com/scripts/drag-drop-custom/demo-drag-drop-3.html')

source = driver.find_elements_by_xpath('//*[@id="box3"]')
target = driver.find_elements_by_xpath('//*[@id="box103"]')
ActionChains(driver).click_and_hold(source).move_to_element(target).release(target).perform()

Always coming out "AttributeError: move_to requires a WebElement"

Traceback (most recent call last):
  File "drag_and_drop_test.py", line 13, in <module>
    ActionChains(driver).click_and_hold(source).move_to_element(target).release(target).perform()
  File "/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/selenium/webdriver/common/action_chains.py", line 121, in click_and_hold
    self.move_to_element(on_element)
  File "/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/selenium/webdriver/common/action_chains.py", line 273, in move_to_element
    self.w3c_actions.pointer_action.move_to(to_element)
  File "/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/site-packages/selenium/webdriver/common/actions/pointer_actions.py", line 42, in move_to
    raise AttributeError("move_to requires a WebElement")
AttributeError: move_to requires a WebElement

Answer 1

find_elements_by_xpath returns a list of WebElements, drag_and_drop (and the other methods) accept a single WebElement. Use find_element_by_xpath

source = driver.find_element_by_xpath('//*[@id="box3"]')
target = driver.find_element_by_xpath('//*[@id="box103"]')

Answer 2

as @guy said:

find_elements_by_xpath

returns list of WebElements. You can use find_element_by_xpath method to get single web element. Or select specific element from WebElements return by find_elements_by_xpath. For example, if you know, you wanted to select 2nd element from return list for target. Then you can try like this:

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

chromedriver = '/usr/local/bin/chromedriver'

driver = webdriver.Chrome(chromedriver)
driver.get('http://www.dhtmlgoodies.com/scripts/drag-drop-custom/demo-drag-drop-3.html')

source = driver.find_elements_by_xpath('//*[@id="box3"]')[0]
target = driver.find_elements_by_xpath('//*[@id="box103"]')[1]

action = ActionChains(driver)
action.drag_and_drop(source, target).perform()

i can see we are selecting element which have id but ids are unique, so there can be only one id. So you can also do this like this:

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

chromedriver = '/usr/local/bin/chromedriver'

driver = webdriver.Chrome(chromedriver)
driver.get('http://www.dhtmlgoodies.com/scripts/drag-drop-custom/demo-drag-drop-3.html')

source = driver.find_element_by_id('box3')
target = driver.find_element_by_id('box103')

action = ActionChains(driver)
action.drag_and_drop(source, target).perform()

i like to use find_element_by_id because it looks cleaner to me than xpath.