问题
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":{}}
回答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 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 at other examples of using JS on the DOM: https://stackoverflow.com/a/60618233/143475
来源：https://stackoverflow.com/questions/60637144/karate-ui-drag-and-drop