如何以编程方式创建 DragEvent？

Posted 2023-05-08

【中文标题】如何以编程方式创建 DragEvent？

【英文标题】：How do I programmatically create a DragEvent?

【发布时间】：2013-12-28 03:40:45

【问题描述】：

This page 描述了用于以编程方式创建事件的 api。从列表看，Chrome 和 Safari 不支持这个 api 来创建 DragEvents。

我正在尝试为 Angular 应用程序中的原生 html5 拖放行为编写自动化测试。如何以编程方式模拟拖放事件，以便我可以做到这一点？

【问题讨论】：

对于 UI 测试，为什么不尝试使用seleniumhq.org？

我们使用 cucumber（我认为类似于 selenium）作为与服务器交互的东西。但我们通常使用 grunt/karma 处理仅客户端的事情。我不想仅仅因为它们有拖放的东西而将这些特定的测试移到其他地方。但这是我可以尝试的一种解决方案。

jQuery.simulate 可能会有所帮助 github.com/jquery/jquery-simulate 开发人员是 jQueryUI 团队的一员

谢谢。我试试看

jQuery.simulate 似乎不起作用。见jsfiddle.net/t5pK2/1。查看模拟代码，jquery 模拟似乎不是在模拟原生 html5 拖放，而是模拟 jquery 拖放，它是使用 click 和 mousemove 事件构建的。我错了吗？

【参考方案1】：

您可能想要使用动作链（来自 selenium）：https://code.google.com/p/selenium/wiki/AdvancedUserInteractions#Generating_Action_chains

我们过去曾在非 angularjs 应用中使用它们进行拖放。无论如何，由于量角器（用于测试 e2e 应用程序的 angularjs defacto 工具）使用 selenium webdriver，我敢打赌你甚至可以使用量角器（https://github.com/angular/protractor）来完成（使用对象“browser.webdriver”。

来自量角器文档：

browser.get 方法加载一个页面。 Protractor 期望 Angular 出现在页面上，因此如果它尝试加载的页面不包含 Angular 库，它将引发错误。 （如果需要与非 Angular 页面交互，可以直接使用 browser.driver 访问封装好的 webdriver 实例）。

【参考方案2】：

最好使用以下量角器 API：

https://code.google.com/p/selenium/source/browse/javascript/webdriver/actionsequence.js

您很可能希望使用以下模式：

browser
    .actions()
    .dragAndDrop(myEle, x:100,y:100)
    .perform();