Unable to perform drag and drop action even code executed without any error

[P Sridhar]

Unable to see element dragged in AnjularJS application even though drag and drop actions performed without any error.

Below is the Code :

WebElement draggable = driver.findElement(By.xpath("//*[@id='page-content-wrapper']/div[2]/div[3]/div[4]/div/div[2]/div/div/div[2]/div/div[1]/ul/li/ul/li[2]/span/span[1]"));

WebElement droppable = driver.findElement(By.xpath(".//*[@id='page-content-wrapper']/div[2]/div[3]/div[3]/div[2]/div[1]/div[1]/div/div[6]/div[2]/div[1]"));

Below are different methods performed and executed without error:

1)

Actions builder = new Actions(driver);

builder.keyDown(Keys.CONTROL).click(draggable).click(droppable). keyUp(Keys.CONTROL).build().perform();

2)

Actions builder = new Actions(driver);

   builder.clickAndHold(draggable).moveToElement(droppable).build();

   builder.dragAndDrop(draggable, droppable).perform();

3)

Actions action = new Actions(driver); 

Thread.sleep(1000);

action.clickAndHold(draggable2).build().perform();

action.moveToElement(droppable2).build().perform();

action.release(droppable2).build().perform();

4)

Actions actions = new Actions(driver); 

browser.actions()

.mouseDown(draggable2)

.mouseMove(draggable2)

.mouseUp(droppable2)

.perform();

Also performed JavaScript methods :

A)

public static void DragAndDropJS2(WebElement source, WebElement destination, WebDriver driver) throws Exception 

{

  // JavascriptExecutor js = (JavascriptExecutor) driver;

   String xto=Integer.toString(source.getLocation().x);

String yto=Integer.toString(destination.getLocation().y);

   ((JavascriptExecutor)driver).executeScript("function simulate(f,c,d,e){var b,a=null;for(b in eventMatchers)if(eventMatchers[b].test(c)){a=b;break}if(!a)return!1;document.createEvent?(b=document.createEvent(a),a==\"HTMLEvents\"?b.initEvent(c,!0,!0):b.initMouseEvent(c,!0,!0,document.defaultView,0,d,e,d,e,!1,!1,!1,!1,0,null),f.dispatchEvent(b)):(a=document.createEventObject(),a.detail=0,a.screenX=d,a.screenY=e,a.clientX=d,a.clientY=e,a.ctrlKey=!1,a.altKey=!1,a.shiftKey=!1,a.metaKey=!1,a.button=1,f.fireEvent(\"on\"+c,a));return!0} var eventMatchers={HTMLEvents:/^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,MouseEvents:/^(?:click|dblclick|mouse(?:down|up|over|move|out))$/}; " +

"simulate(arguments[0],\"mousedown\",0,0); simulate(arguments[0],\"mousemove\",arguments[1],arguments[2]); simulate(arguments[0],\"mouseup\",arguments[1],arguments[2]); ",

source,xto,yto);

}

B)

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

}

C)

public static void DragAndDropJS1(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" +"}\n" +"\n" +"var source = arguments[0];\n" +"var destination = arguments[1];\n" +"simulateHTML5DragAndDrop(source,destination);",source, destination);

Thread.sleep(1500);

}

All the above mentioned methods and commands are compilled and executed without any error but unable to perform drag and drop operation in UI (PLEASE HELP).

[nikhil rao]

On which URL are you trying to do these operations??

[P Sridhar]

Hi Nikhil,

Its our company product (URL Cant be found for you to verify )

I can share you the screenshot which can get you an over view of application.

[Shubham Agarwal]

I have already faced same issue , the root of problem is your source is correct , but destination is not correct , because the element which you want to drag & drop is not properly dropped at the desired location, so try moveByOffset method.

[P Sridhar]

Hi Shubham, Thanks for the reply. tried with moveByOffset method also but no Luck

[Shubham Agarwal]

are you able to hold the element ?

[P Sridhar]

I can able to identify and highlight it but am not sure is it able to hold the element are not!

[Shubham Agarwal]

Then first just try to hold the element and drag it , do not drop it . It will more clear that whether the problem is in dragging the element or dropping the element . 

[P Sridhar]

Ok Thanks i will try and let you know.

[Sudarshan Hegde]

Hi Sridhar ,

Even our application is built Angualar JS Drag and Drop.

I tried Java Script executor and JavaScript to achieve this . Below is the code and attached the JS file.

public static void drag_and_drop_js(WebDriver driver, WebElement source ,WebElement target){

try {

//Drag 1st control to layout

String js_filepath = System.getProperty("user.dir") +"/src/test/resources/drag_and_drop_helper2.js";

//Log.Info("JS filePath is " + js_filepath);

String java_script="";

String text;

BufferedReader input = new BufferedReader(new FileReader(js_filepath));

StringBuffer buffer = new StringBuffer();

while ((text = input.readLine()) != null)

buffer.append(text + "\n");

java_script = buffer.toString();

input.close();

String load_jquery = "var jqueryUrl = \"http://code.jquery.com/jquery-2.1.1.min.js\";\n"

+ "var scriptElt = document.createElement('script');\n"

+ "scriptElt.type = 'text/javascript';\n"

+ "scriptElt.src = jqueryUrl;\n"

+ "scriptElt.src = jqueryUrl;\n"

+ "document.getElementsByTagName('head')[0].appendChild(scriptElt);";

JavascriptExecutor js = (JavascriptExecutor) driver;

driver.manage().timeouts().setScriptTimeout(2000, TimeUnit.SECONDS);

Log.Info("Launching Javascript browser driver");

String drag_drop_script = "jQuery(arguments[0]).simulate('drag', { dropTarget: arguments[1] });";

js.executeScript(load_jquery);

Log.Info("Loading jQuery");

js.executeScript(java_script);

Log.Info("Loading Drag Simulation script");

js.executeScript(drag_drop_script,source,target);

Log.Info("Loading DND js script");

} catch (Exception e) {

System.out.println(("Error :" + e.toString()));

Log.Warn(e.getLocalizedMessage());

}

}  

--
You received this message because you are subscribed to the Google Groups "Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to selenium-users+unsubscribe@googlegroups.com.
To post to this group, send email to selenium-users@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/6d116d00-af18-46c4-9f3b-088dfd1f99e9%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[P Sridhar]

Unable to drag the element is there any way to know that 'is the element is draggable/not'?

[P Sridhar]

Hi Sudharshan, Thanks for the reply Just now tried with the below method but still no luck.

Am using Chrome 53 and Firefox 42 versions will that make any difference?

To unsubscribe from this group and stop receiving emails from it, send an email to selenium-user...@googlegroups.com.
To post to this group, send email to seleniu...@googlegroups.com.

[P Sridhar]

If Not Selenium is there any other tool that works for Angular JS application (specifically drag and drop actions)?

Can anyone please let me know any tool that works for my requirement.

On Friday, September 23, 2016 at 11:51:47 AM UTC+5:30, P Sridhar wrote:

[skd]

I'm not sure if it will work with Angular JS, but I'm using a JavaScript library I found here to do drag-and-drop of HTML5 components. JQuery is required.

drag_and_drop_helper.js is read into variable dragAndDropJS, then tests call the following method with the IDs of the item I want to drag and the drop target, e.g. this.dragAndDrop("item3", "bucket"):

    protected void dragAndDrop(String item, String target) {
        ((JavascriptExecutor)driver).executeScript(dragAndDropJS+" $('#"+item+"').simulateDragDrop({ dropTarget: '#"+target+"'});");
    }

[P Sridhar]

Hi skd, It seems to be HTML5 web element only as none of the selenium and Java Scripts with Jquery methods are not impacted on elements.Thanks for the reply and info

[P Sridhar]

Issue has been resolved by using SIKULI tool (i.e, using image based identification) am able to perform Drag and Drop operation.

Screen screen=new Screen(); Pattern ClickDrag=new Pattern("C:\\Users\\sridharp\\Desktop\\Sridhar\\ExpStudio\\C‌​lickDrag.JPG"); Pattern ClickDrop1=new Pattern("C:\\Users\\sridharp\\Desktop\\Sridhar\\ExpStudio\\C‌​lickDrop1.JPG"); screen.dragDrop(ClickDrag, ClickDrop1);

Thnx for the help :)

On Wednesday, September 28, 2016 at 10:42:58 PM UTC+5:30, skd wrote: