在 java 中使用 selenium webdriver 拖放分层列表答案

【问题标题】：Drag & drop hierarchical list using selenium webdriver in java在 java 中使用 selenium webdriver 拖放分层列表
【发布时间】：2015-01-07 10:15:30
【问题描述】：

在 java 中使用 selenium webdriver 拖放分层列表

Github link: https://github.com/dbushell/Nestable

Demo link:- http://dbushell.github.io/Nestable/

我想在 java 中使用 selenium webdriver 拖放分层列表。有关详细信息，请参阅演示链接。

我尝试了以下方法：-

获取源元素
使用 class=dd-placeholder 创建一个 div
将源元素拖放到新创建的 div 元素上

错误：- 无法将源元素放在新创建的 div 元素上。

我该怎么做。是否可以使用 selenium webdriver。

Note: See demo link

【问题讨论】：

在源是 div 元素而目标是 li 标签的情况下，dragAndDrop 不工作吗？
@VivekSingh 正确查看演示。首先 div[class='dd-placeholder'] 将在 drop 之前创建，并且仅在 drop 之后创建 li 标签。
如果做对了，您需要（例如）将第 6 项移动到第 1 项吗？是这样吗？
@VivekSingh 我需要移动元素。如何使用 class=dd-placeholder 将源元素拖放到新创建的 div
因为你移动到的 div 元素包含在一个 li 元素中。将目标指定为 li 而不是 div。我试过了（如果将第 6 项移到第 1 项） -- source = driver.findElement(By.xpath("//div[.='Item 6']")); target= driver.findElement(By.xpath("//li[@data-id='1']"));

标签： java selenium-webdriver drag-and-drop

【解决方案1】：

我发现拖放功能会根据您使用的浏览器而略有不同，我必须在拖放位置添加偏移量才能使其在 Chrome Firefox 和 IE 中始终如一地工作。

这是一个C# sn-p，但java应该是类似的。本例中的目标是我用 JS 插入的占位符 div，就像你的方法一样

Actions act = new Actions(WebDriver);
act.ClickAndHold(source);
act.MoveToElement(target);
act.MoveByOffset(0, 5); //Minimum 1 pixel offset for Chrome, 5 for IE 
act.Release(source);
act.Build().Perform();

【讨论】：

我使用的代码与您使用的代码相同。但是您能否使用演示链接中提到的 selenium 来模仿功能。我做不到。

【解决方案2】：

此方法使用 Javascript 将 web 元素从一个位置拖放到另一个位置。不要被它的 javascript 所困扰:)。只需通过提供 from 和 to 参数来使用该方法。祝你好运！

public void dragAndDrop(WebElement from, WebElement to) {
    js.executeScript("function createEvent(typeOfEvent) {\n" + "var event =document.createEvent(\"CustomEvent\");\n"
            + "event.initCustomEvent(typeOfEvent,true, true, null);\n" + "event.dataTransfer = {\n" + "data: {},\n"
            + "setData: function (key, value) {\n" + "this.data[key] = value;\n" + "},\n"
            + "getData: function (key) {\n" + "return this.data[key];\n" + "}\n" + "};\n" + "return event;\n"
            + "}\n" + "\n" + "function dispatchEvent(element, event,transferData) {\n"
            + "if (transferData !== undefined) {\n" + "event.dataTransfer = transferData;\n" + "}\n"
            + "if (element.dispatchEvent) {\n" + "element.dispatchEvent(event);\n"
            + "} else if (element.fireEvent) {\n" + "element.fireEvent(\"on\" + event.type, event);\n" + "}\n"
            + "}\n" + "\n" + "function simulateHTML5DragAndDrop(element, destination) {\n"
            + "var dragStartEvent =createEvent('dragstart');\n" + "dispatchEvent(element, dragStartEvent);\n"
            + "var dropEvent = createEvent('drop');\n"
            + "dispatchEvent(destination, dropEvent,dragStartEvent.dataTransfer);\n"
            + "var dragEndEvent = createEvent('dragend');\n"
            + "dispatchEvent(element, dragEndEvent,dropEvent.dataTransfer);\n" + "}\n" + "\n"
            + "var source = arguments[0];\n" + "var destination = arguments[1];\n"
            + "simulateHTML5DragAndDrop(source,destination);", from, to);

}

【讨论】：