在 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

它对我有用..

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);

}

我遇到了 Selenium 操作拖放的问题。上面的代码是我的解决方案。

Answer 2

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

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

Answer 3

Webdriver 是为浏览器自动化而设计的，而不是用于更改服务器端代码或服务器返回的 HTML。但是，如果您想在客户端临时更改 HTML，则必须像其他人一样在浏览器上运行一些 JavaScript。

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

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

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

我参考了以下链接： How to create a li tag dynamically using selenium webdriver on java

Answer 4

您可以使用 for 循环将元素从一个位置拖放到多个位置。

public static void dragdrop(){
    WebElement slider = driver.findElement(By.id("dragdrop"));
    int width=slider.getSize().getWidth();   // Width of SLider
    Actions move = new Actions(driver);
    move.moveToElement(slider, ((width*10)/100), 0).click();  // move to a specific point on the dragpoint
    move.build().perform();
       System.out.println("Slider moved");
      }

或

// 将元素从一个位置移动到另一个位置。

 public void dragdrop(){
     WebElement element = driver.findElement(By.name("source")); 

     WebElement target = driver.findElement(By.name("target"));

   (new Actions(driver)).dragAndDrop(element, target).perform();

}

Answer 5

试试下面的代码

WebElement LocatorFrom=driver.findElement(By.xpath("(.//*[normalize-space(text()) and 
normalize-space(.)='Items to Drag'])[1]/following::span[1]"));  

 //Element on which need to drop.       
 WebElement LocatorTo=driver.findElement(By.id("mydropzone"));  
 String xto=Integer.toString(LocatorTo.getLocation().x);
String yto=Integer.toString(LocatorTo.getLocation().y);
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);",LocatorFrom, LocatorTo);
Thread.sleep(1500);

Answer 6

使用

Actions builder = new Actions(driver);

builder.dragAndDrop(src,trgt).build().perform();

在此之前请检查 src 和 trgt 是否能够正确识别对象。

谢谢。 阿伦