在java上使用selenium webdriver进行拖放

Question

在java上使用selenium webdriver进行拖放

src：-

<div class="dd"><img alt="World" src="test.png" style="margin-top: -5px;width:auto;height:16px;padding-right:5px;"><span>sample</span></div>

目标：-

<div id="hierarchy">
<div class="dd" id="tree_nodes">
<ol class="dd-list" id="ancestor">

<li class="dd-item" ><div class="dd-handle"><img alt="testing" src="test2.png" ><a  name="tree" style="margin:5px;">first page</a></div></li>

<li class="dd-item" ><div class="dd-handle"><img alt="testing" src="test2.png" s><a  name="tree" style="margin:5px;">second page</a></div></li>

<li class="dd-item" ><div class="dd-handle"><img alt="testing" src="test2.png" ><a  name="tree" style="margin:5px;">third page</a></div></li>

<li class="dd-item" ><div class="dd-handle"><img alt="testing" src="test2.png" s><a  name="tree" style="margin:5px;">fourth page</a></div></li>

</ol>
</div>


</div>

我使用以下代码进行拖放：-

Actions builder = new Actions(driver);

Action dragAndDrop = builder.clickAndHold(src).moveToElement(trgt).release(trgt).build();

dragAndDrop.perform();

我想把src元素拖到目标元素（作为li标记插入div标记的ol中）。如何在div（目标元素）的ol中插入第一个、最后一个或中间li标记。

我想创建一个li标记（比如目标元素中的li），然后将src元素拖到ol中新创建的li标记上（目标元素中存在）。

如何在selenium中创建li标记？

Answer 1

Web驱动程序是为浏览器自动化而设计的，而不是为了更改服务器端代码或服务器返回的超文本标记语言。但是，如果你想在客户端临时更改超文本标记语言，你必须像其他人一样在浏览器上运行一些JavaScript。

您可以通过将WebDriver实例转换为JavascriptExecutor来执行JavaScript：

WebDriver driver; // Assigned elsewhere
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("return document.title");

然后，您可以使用JavaScript操作WebDriver实例当前正在驱动的浏览器上显示的页面内的DOM。

我参考了下面的链接：如何在java上使用selenium webDriver动态创建li标签

Answer 2

不能使用Selenium创建元素。Selenium用于测试web应用程序，而不是修改源代码。

虽然作为例外，您可以使用javascript来修改源。

Answer 3

它对我有用...

public static void DragAndDropJS(WebElement source, WebElement destination, WebDriver driver) throws Exception 
{
    JavascriptExecutor js = (JavascriptExecutor) driver;
    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);",source, destination);
    Thread.sleep(1500);

}

我面临着拖拽硒行动的问题。以上代码就是我的解决方案。