1

I am studying KarateUI possibilities. And I tried to use drag and drop functionality of framework. I used a page with draggable elements https://www.seleniumeasy.com/test/drag-and-drop-demo.html and my script does not work on it. What is wrong with my script? Here it is:

mouse().move('{div/span}Draggable 1').down().move('#mydropzone').up()

And i also see in console of IDE next log

16:11:40.196 [ForkJoinPool-1-worker-1] DEBUG c.intuit.karate.driver.DriverOptions - >> {"method":"Input.dispatchMouseEvent","params":{"type":"mouseMoved","x":31,"y":820},"id":16}
16:11:40.200 [nioEventLoopGroup-2-1] DEBUG c.intuit.karate.driver.DriverOptions - << {"id":16,"result":{}}
16:11:40.203 [ForkJoinPool-1-worker-1] DEBUG c.intuit.karate.driver.DriverOptions - >> {"method":"Input.dispatchMouseEvent","params":{"type":"mousePressed","x":31,"y":820,"button":"left","clickCount":1},"id":17}
16:11:40.234 [nioEventLoopGroup-2-1] DEBUG c.intuit.karate.driver.DriverOptions - << {"id":17,"result":{}}
16:11:40.234 [ForkJoinPool-1-worker-1] DEBUG c.intuit.karate.driver.DriverOptions - >> {"method":"Input.dispatchMouseEvent","params":{"type":"mouseMoved","x":231,"y":827},"id":18}
16:11:40.242 [nioEventLoopGroup-2-1] DEBUG c.intuit.karate.driver.DriverOptions - << {"id":18,"result":{}}
16:11:40.242 [ForkJoinPool-1-worker-1] DEBUG c.intuit.karate.driver.DriverOptions - >> {"method":"Input.dispatchMouseEvent","params":{"type":"mouseReleased","x":231,"y":827,"button":"left","clickCount":1},"id":19}
16:11:40.250 [nioEventLoopGroup-2-1] DEBUG c.intuit.karate.driver.DriverOptions - << {"id":19,"result":{}}
hdanske
  • 21
  • 1
  • 5
  • this is indeed a bug and we are looking into it, thanks for reporting this ! https://github.com/intuit/karate/issues/1075 – Peter Thomas Mar 11 '20 at 15:25

1 Answers1

0

Drag and drop is actually quite hard to get right, so I recommend doing this via JavaScript. Executing JS is actually quite easy using Karate:

* driver 'https://www.seleniumeasy.com/test/drag-and-drop-demo.html'
* script("var myDragEvent = new Event('dragstart'); myDragEvent.dataTransfer = new DataTransfer()")
* waitFor('{}Draggable 1').script("_.dispatchEvent(myDragEvent)")
* script("var myDropEvent = new Event('drop'); myDropEvent.dataTransfer = myDragEvent.dataTransfer")
* script('#mydropzone', "_.dispatchEvent(myDropEvent)")
* screenshot()

So with a little bit of awareness of some of the internals - e.g. the HTML5 DataTransfer API - you can do pretty much anything. I think "bending the rules" in cases like this is fine when it comes to automating complex E2E user-interactions in a browser.

You can of course wrap the drag-and-drop into a re-usable function in Karate, just keep in mind that "DOM JS" is sent to the browser as plain-text.

Refer the docs: https://github.com/intuit/karate/tree/master/karate-core#function-composition

EDIT: for those looking for other examples of using JS on the DOM:

  1. https://stackoverflow.com/a/60618233/143475
  2. https://stackoverflow.com/a/61478834/143475
  3. https://stackoverflow.com/a/66677401/143475
  4. https://stackoverflow.com/a/67701399/143475
  5. https://stackoverflow.com/a/67629911/143475
  6. https://stackoverflow.com/a/76698661/143475
Peter Thomas
  • 54,465
  • 21
  • 84
  • 248