Drag and drop with selenium webdriver in java

Question

Drag and drop with selenium webdriver in java

Drag using selenium webdriver on java

CSI: -

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

Goal: -

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

Use this code to 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 the target element (insert as li tag inside ol div tag). How can I insert as the first or last or intermediate li tag inside an ol div (target element).

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

How to create li tag in selenium?

+6

java selenium-webdriver drag-and-drop

karan Jan 2 '15 at 12:39

source share

6 answers

Arun · Answer 1 · 2015-01-07T10:31:09+0000

Using

 Actions builder = new Actions(driver); builder.dragAndDrop(src,trgt).build().perform();

Before doing this, please check that src and trgt have the ability to identify objects.

Thanks. Arun

Ramshwar · Answer 2 · 2015-04-02T14:56:55+0000

You cannot create elements using Selenium. Selenium is designed to test web applications so as not to modify the source code.

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

Abhinav · Answer 3 · 2015-07-13T12:23:07+0000

Webdriver is designed to automate the browser, and not to modify server-side code or HTML returned by the server. However, if you want to temporarily change the client side HTML code, you will have to do what everyone else does and run some JavaScript in the browser.

you can execute javascript with a WebDriver instance by injecting it into a JavascriptExecutor:

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

You can then use JavaScript to manipulate the DOM inside the page displayed in the browser where your instance of WebDriver is currently running.

I refer below: How to dynamically create li tag using selenium web editor in java

Ankit jain · Answer 4 · 2015-09-13T12:21:36+0000

you can use a loop to draw an element from one position to several positions.

 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 the item from one position to another.

  public void dragdrop(){ WebElement element = driver.findElement(By.name("source")); WebElement target = driver.findElement(By.name("target")); (new Actions(driver)).dragAndDrop(element, target).perform(); }

Anand thanappan · Answer 5 · 2016-07-28T13:53:29+0000

This 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 ran into problems with Selenium Actions Drag and drop. The above code was the solution for me.

user1931543 · Answer 6 · 2019-01-17T04:12:53+0000

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

Drag and drop with selenium webdriver in java

More articles: