Drag and drop with selenium webdriver on java

Question

Drag and drop with selenium webdriver on java

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>

target:-

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

Am using this code for drag and drop:-

Actions builder = new Actions(driver);

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

dragAndDrop.perform();

I want to drag the src element to target element(insert as a li tag inside ol of div tag). How can i insert as a first or last or intermediate li tag inside ol of div(target element).

I want to create a li tag(like as li in target element) and then drag the src element to the newly created li tag inside ol(present in target element).

How do i create a li tag in selenium ?

Answer 1

It works for me..

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

}

I faced issues with Selenium Actions Drag and drop. The above code was the solution for me.

Answer 2

Use

Actions builder = new Actions(driver);

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

Before this Please check src and trgt are properly able to identify the objects.

Thanks. Arun

Answer 3

You cannot create elements using Selenium. Selenium is meant for testing web applications not to modify the source code.

Although as an exception, you can use javascript to modify the source.

Answer 4

Webdriver is designed for browser automation, not for changing server side code or HTML returned by the server. However, if you want to change the HTML temporarily on the client side, you'll have to do what everyone else does and run some JavaScript on the browser.

you can execute JavaScript with a WebDriver instance by casting it into a JavascriptExecutor:

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

Then you can use JavaScript to manipulate the DOM inside the page being shown on the browser that your WebDriver instance is currently driving.

I referrred below link: How to create a li tag dynamically using selenium webdriver on java

Answer 5

you can user for loop to drap element from one position to multiple position.

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

OR

// Move element from one position to other position.

 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 6

try below code

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