automation - Karate UI drag and drop

Question

This question already has an answer here:

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:

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