空手道 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 执行此操作.使用 Karate 执行 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 -你几乎可以做任何事情.我认为违反规则"在这种情况下，在浏览器中自动执行复杂的 E2E 用户交互时，这种情况很好.

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.

您当然可以将拖放包装成可重用的空手道功能，只需记住 DOM JS"以纯文本形式发送到浏览器.

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.

参考文档:https://github.com/intuit/karate/tree/master/karate-core#function-composition

对于那些正在寻找在 DOM 上使用 JS 的其他示例的人:

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

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