Drag And Drop in RobotFramework

[henrichsson]

Hello there!
I have a problem with Drag And Drop within Robot Framework test.

I am trying to drag and drop an element to a specific location or over a specific element but no luck so far.

I want to do it with:

1. Drag And Drop By Offset xpath=//*[@id="elementSource"] 450 0
   or simply with
2. Drag And Drop xpath=//[@id="elementSource"] xpath=//[@id="elementDestination"]

I have also tried with
3. Assign Id To Element xpath=//[@id="elementDestination"] dropArea
3.1 Drag And Drop xpath=//[@id="elementSource"] target=dropArea

and

1. Drag And Drop xpath=//[@id="elementSource"] xpath=//[@id="dropArea"]
   where dropArea is ul element with id="dropArea"

elementSource is

.

When the test comes to this point elementSource is visibly selected by mouse hover/click but there is no horizontal drag performed. ElementSource should be placed to a placeholder (ul element) but it is not?? Another idea that I came up with was combination of Mouse Down, Mouse Over and Mouse Down but still no luck... Any solid suggestions?

Versions I use:
Windows 8.1
Robot Framework 2.9.2 (Python 2.7.10 on win32)
Firefox 42.0
Google Chrome Version 46.0.2490.86 m
Latest version of Selenium2Library

[hmalphettes]

Hi there, I appreciate the investigation you have done here.
I am sorry I have not touched this code and I have not used it for a few years.

It seems that there was some recent question June 2015 here: https://github.com/robotframework/Selenium2Library/issues/423

Is this relevant to your use case?

[henrichsson]

Hey hmalphettes!
I am new on GH and I think I posted the question on wrong place. I should ask on more public area about my problem :) Anyway, thanks for your answer, will try to do that as well.
However, now I am working on testing DnD on a very simple example like the one you can find here:
http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple

I am not using any extensions for Selenium lib, but just trying to do it with builtin Drag And Drop or Drag And Drop By Offset. My test should move Item 1 from list A to List B and my test looks like:

Assign Id To Element xpath=/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[2]/div/div[2]/ul/li[1] dropArea
Drag And Drop xpath=/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[1]/div/div[2]/ul/li[1] target=dropArea

Nothing happens? No drag and drop, console output is without errors:

03 Demo-Drag-And-Drop :: Testing DnD | PASS |
1 critical test, 1 passed, 0 failed
1 test total, 1 passed, 0 failed

What is so wrong here?? Is DnD in Angular drag & drop with HTML5 even supported??

[emanlove]

@henrichsson I tried a pure selenium version using the sample site you noted with the following code

>>> from selenium import webdriver
>>> driver = webdriver.Firefox()
>>> driver.get("http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple")
>>> el = driver.find_element_by_xpath("/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[1]/div/div[2]/ul/li[1]")
>>> dest=driver.find_element_by_xpath("/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[2]/div/div[2]/ul/li[1]")
>>> from selenium.webdriver.common.action_chains import ActionChains
>>> ActionChains(driver).drag_and_drop(el,dest).perform()

This intends to move List A1 to the spot occupied by List B1. Interesting A1 goes away but is not put into the spot of B1. It might be what it selects the droping point to be with B1 and it may be outside of a list with the app interpreting that as "removing" that list item. So it looks like selenium is working atleast on this test site. You might try something similar on you site that you are testing.

[henrichsson]

emanlove this looks like python to me and xpaths for el and dest are the same?
I am writing my tests with Sublime in RobotFramework, and my test is like
Open Browser http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple ${BROWSER}
Set Selenium Timeout ${TIMEOUT}
Maximize Browser Window
Set Selenium Speed ${DELAY}
Drag And Drop xpath=/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[1]/div/div[2]/ul/li[1] xpath=/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[2]/div/div[2]/ul/li[1]

And this is not working after all.....

[henrichsson]

If I change the xpath of dest pointing to Item A2 of list A, then the el is selected and dragged but not dropped :O

#!/usr/bin/env python
from selenium import webdriver
driver = webdriver.Firefox()
driver.get("http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple")
el = driver.find_element_by_xpath("/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[1]/div/div[2]/ul/li[1]")
dest=driver.find_element_by_xpath("/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[1]/div/div[2]/ul/li[2]")
from selenium.webdriver.common.action_chains import ActionChains
ActionChains(driver).drag_and_drop(el,dest).perform()

[emanlove]

Yes it is python and those xpaths are different; see the third from last div. This is dragging across lists where yours is dragging within a list. Interesting it seems we both have the same outcome. It is dragged but not dropped. The whole point in using Python was to debug your situation. With your report the first thing I did was manual try this and for at least the example code it works. The next debug step was, knowing that this has been used and tested so under some certain cases, is this a Selenium problem. This is the five minute diagnosis tool which I don't always pull out but sometime a real good and quick check.

In my mind our selenium check is far from conclusive in that I don't know off the top of my head where the drag and drop code drops (although I suspect it is the middle of the element) so it still might do what we are expecting using selenium and then yes it could very well be a Selenium2Library issue. I would recommend you check to see where drag and drop actually drops. Also I would try doing all the steps of click and hold, move mouse, release click. In addition I would calculate the position within the test as when I ran the above script the window was minimized and the two lists were stacked vertically so a hard coded move this much could also not prove anything.

Let me say I suspect it may be the Angular code and that the selenium drag and drop would not properly perform the native events that angular code is expecting. Could also be the drop location. But best to try a few more things to see more...

[henrichsson]

Yes, it is dropped in the middle of the drop zone (element). I assume something must be with Angular and it's DnD module, maybe the RF gets confused and can not continue. I have managed to simulate DnD in this example: http://interactjs.io but again no luck here: http://logicbomb.github.io/ng-directives/drag-drop.html

I am getting very close to my final opinion that there must be an issuse/bug with Angular DnD and RF, but still need someone to confirim that.

[emanlove]

[Thinking out loud] I would be cautious with drawing conclusions when dealing with native events and action chains. Selenium although it works to mimic the user it still has some differences. It may be that the selenium native events are doing one thing and the browser/angular code is expecting something else. There may not be a fault on anyone's side (I can perform this manually) and you may just have to hack it to be a close as possible.

[henrichsson]

I am running out of ideas :)

[emanlove]

One thing I was interested in was the difference between my manual test and the selenium test in that manually the dragged object was visible while with the automation it was not. One test would be to not worry about the drop part and just to an infinite loop dragging it around a circle or something. Does one see this visually? This is the experimental approach. The other, theoretical approach, would be to dive into the angular code and see how it is implemented and if one can see the mouse events it looks for. So does it look for a mouse over while the selenum does as mouse move, for example. Essentially try to find in code what angular is doing.

From an experimental standpoint I would look at all the mouse actions and just play to see how the app reacts.

You might also post a question on both the selenium and angular user groups with sample selenium python test code as well as full information about selenium/browser versions. The more information shared the more likely you'll get a good response. They also have more people in those groups with experience testing drag by angular then you would find here.

[NoUsername]

I know this is a really old issue, but I just ran into the same problem, also wrote a small snippet to show the problem on an html5 drag demo site:
http://html5demos.com/drag

Scenario: Foobar
    Set Selenium Speed              0.1
    Open Browser           http://html5demos.com/drag      chrome
    Maximize Browser Window
    Sleep       2
    Drag And Drop By Offset     css=#one    -220    0
    Drag And Drop By Offset     css=#two    220    0
    Drag And Drop           css=#three      css=#bin

tried a few things (adding sleeps, adding mouse up/down events before/after, ...) but no luck.

Not sure how angular DnD module works internally, but there definitely seems to be a problem with html5 drag&drop.

[lassemon]

Had a similar problem without Angular
Tried both

Drag And Drop By Offset    css=${source}    ${DRAG OFFSET X}    ${DRAG OFFSET Y}
Drag And Drop              css=${source}    css=${target}

on an html5 drag&drop code. It does something similar to what @henrichsson described: "elementSource is visibly selected by mouse hover/click but there is no horizontal drag performed"

I attached the following event handlers to the draggable element: onDragStart, onDrag and onDragEnd and printed out the event.clientX and event.clientY coordinates on all of them.
Using manual mouse with plain old Chrome, all events are captured and all coordinates are printed. When using robot framework, only the dragStart event is fired. Robot does not trigger the onDrag event and initially also does not trigger the onDragEnd event. However, when moving my mouse ontop of the chromedriver opened browser, the dragEnd event is fired with coordinates of where ever my mouse landed on the page.

Based on the above, and the fact that the html5 drag&drop works perfectly on plain old Chrome, I'd venture a guess that this is not in any way related to Angular, but is indeed a bug in robot or selenium. Drag and Drop simply does not work.

Chromedriver version 2.42.591088 (7b2b2dca23cca0862f674758c9a3933e685c27d5)
Python version 2.7.15
Selenium version 3.14.0
Robot version 3.0.2