Karate UI drag and drop [duplicate] - automation

Question

This question already has an answer here:
KarateDSL UI Testing - Friendly Locators not working
(1 answer)
Closed 2 years ago.
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":{}}

Answer 1

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:
https://stackoverflow.com/a/60618233/143475
https://stackoverflow.com/a/61478834/143475
https://stackoverflow.com/a/66677401/143475
https://stackoverflow.com/a/67701399/143475
https://stackoverflow.com/a/67629911/143475