拖放不适用于 Selenium Python答案

【问题标题】：Drag & Drop not working with Selenium Python拖放不适用于 Selenium Python
【发布时间】：2017-04-11 17:16:33
【问题描述】：

我想用 selenium python 实现一个简单的拖放。我正在使用 Chrome WebDriver，下面是我的代码。什么都没发生。非常感谢任何帮助。

from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium import webdriver
from selenium.common import exceptions
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.support.ui import Select
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver import ActionChains
driver = webdriver.Chrome()
driver.get("http://html5demos.com/drag")
dragElement=driver.find_element_by_id("one")
dropElement=driver.find_element_by_id("bin")

action_chains = ActionChains(driver)
action_chains.drag_and_drop(dragElement, dropElement).perform()

【问题讨论】：

标签： python selenium selenium-webdriver drag-and-drop selenium-chromedriver

【解决方案1】：

Selenium 拖放功能很简单，您需要使用 Selenium ActionChains。

ActionChains 是一种自动化低级别交互的方法，例如鼠标移动、鼠标按钮操作、按键和上下文菜单交互。这对于执行更复杂的操作（例如悬停和拖放）很有用。

参考documentation：

在您的具体情况下，您需要在调用drag_and_drop 函数之后识别动作的来源和目标（图像和其中一个框）。

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

driver = webdriver.Chrome()
driver.get("http://html5demos.com/drag")
source_element = driver.find_element_by_id('bin')
dest_element = driver.find_element_by_id('two')
ActionChains(driver).drag_and_drop(source_element, dest_element).perform()

【讨论】：

嗨@aberna，我试过了......它不起作用:(它只突出显示元素但从不真正拖动它。我最终实现了一个自定义JS来处理拖放。
@prgrmr 你碰巧在任何地方上传了这个解决方案吗？或者你介意回答你自己的问题吗？我跟你有同样的问题。
它与 selenium 一起工作。我导入 jquery，使用它的拖放：/

【解决方案2】：

您现在可以将此脚本作为快速修复程序执行（在 Chrome 和 Firefox 上都适用于我）。 https://gist.github.com/druska/624501b7209a74040175#file-native_js_drag_and_drop_helper-js

我所做的只是添加了 simulateDragDrop(arguments[0], arguments[1]):

function simulateDragDrop(sourceNode, destinationNode) {
    var EVENT_TYPES = {
        DRAG_END: 'dragend',
        DRAG_START: 'dragstart',
        DROP: 'drop'
    }

    function createCustomEvent(type) {
        var event = new CustomEvent("CustomEvent")
        event.initCustomEvent(type, true, true, null)
        event.dataTransfer = {
            data: {
            },
            setData: function(type, val) {
                this.data[type] = val
            },
            getData: function(type) {
                return this.data[type]
            }
        }
        return event
    }

    function dispatchEvent(node, type, event) {
        if (node.dispatchEvent) {
            return node.dispatchEvent(event)
        }
        if (node.fireEvent) {
            return node.fireEvent("on" + type, event)
        }
    }

    var event = createCustomEvent(EVENT_TYPES.DRAG_START)
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event)

    var dropEvent = createCustomEvent(EVENT_TYPES.DROP)
    dropEvent.dataTransfer = event.dataTransfer
    dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)

    var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END)
    dragEndEvent.dataTransfer = event.dataTransfer
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)
}

simulateDragDrop(arguments[0], arguments[1]);

我将此文件保存为我项目目录的 scripts 文件夹中的 drag_and_drop.js 文件。然后我在测试中使用了下一个代码：

DRAGGABLE_SELECTOR = (By.CSS_SELECTOR, "div[draggable]")
DROPPABLE_SELECTOR = (By.CSS_SELECTOR, ".ReactCollapse--content > div > div > div > div > div > div[id]")
draggable = self.app.wd.find_element(*DRAGGABLE_SELECTOR)
droppable = self.app.wd.find_element(*DROPPABLE_SELECTOR)
f = open("scripts/drag_and_drop.js",  "r")
javascript = f.read()
f.close()
wd.execute_script(javascript, draggable, droppable)

还有一点：这个脚本只接受 CSS 选择器 找到的元素（因为它是一个 JQuery 脚本）！

【讨论】：

【解决方案3】：

您现在可以尝试使用我上面提到的解决方法。我还把它打包成一个 Python 包，所以它很容易使用。

你可以用pip install seletools安装包

一个用法示例是here。

【讨论】：