空手道UI拖放 [英] Karate UI drag and drop

问题描述

我正在研究KarateUI的可能性.而且我尝试使用框架的拖放功能. 我使用的页面包含可拖动元素 https://www.seleniumeasy.com /test/drag-and-drop-demo.html ，而我的脚本对此不起作用.我的脚本出了什么问题?在这里:

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()

而且我也可以在IDE的控制台中看到下一个日志

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":{}}

推荐答案

实际上很难正确地进行拖放，因此我建议通过JavaScript进行此操作.使用空手道实际上很容易执行JS:

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()

因此，您需要对一些内部知识有所了解-例如HTML5 DataTransfer API-您可以做很多事情任何事物.对于在浏览器中自动执行复杂的端到端用户交互，我认为在这种情况下违反规则"是可以的.

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.

您当然可以将拖放操作包装到Karate中可重用的函数中，只需记住JS是作为纯文本发送到浏览器的，请参考文档: https://github.com/intuit/karate/tree/master/karate-core#function -组成

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

对于那些在DOM上使用JS的其他示例: https://stackoverflow.com/a/60618233/143475

for those looking at other examples of using JS on the DOM: https://stackoverflow.com/a/60618233/143475

这篇关于空手道UI拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！