如何自动将文件拖放到无头浏览器的窗口中？答案

【问题标题】：how to automate drag and drop of files into a headless browser's window?如何自动将文件拖放到无头浏览器的窗口中？
【发布时间】：2013-08-13 12:58:39
【问题描述】：

我正在构建一个网络应用程序，该应用程序涉及将文件从用户系统拖放到浏览器窗口中。

我想使用可用的无头浏览器之一（用于测试驱动开发）自动化用户与 UI 的交互，以便虚拟 DOM 获取文件放置事件。

我花了两个小时寻找开箱即用的解决方案，但没有成功。唯一可以自动化的是使用 input[type=file] 上传单个文件。这不是我想要的。

是否有适用于 Mac OS X 或 Linux 的现成解决方案？

【问题讨论】：

【解决方案1】：

我知道没有好的解决方案，但我有几个解决方法：

您可以在 Linux 上的 VM 或 Xnest 或 VNC 服务器中运行浏览器。这给了你一个用户界面。 VNC 之类的协议还允许您模拟鼠标，因此您可以打开文件浏览器并真正将文件拖到上面。

专业人士：做真实的事情。
缺点：易碎。有很多工作要做。

你到底在测试什么？浏览器中的文件上传组件？还是在服务器上处理文件？

如果您使用现有/盒装组件进行多文件上传，那么您为什么要测试它？给你写的人不测试吗？为什么要复制这项工作？

如果您只关心服务器是否正确处理文件，请使用 HTTP 客户端库手动上传。如有必要，请使用Charles 之类的 HTTP 代理查看真实客户端和服务器之间发生的情况。

如果您想测试应用和小部件的交互，事情就会变得棘手。要对此进行测试，您需要在浏览器中启用日志记录/调试，以查看在放置期间触发了哪些事件。 JavaScript 允许您创建任何事件。对于phantomjs，试试--webdriver-loglevel=DEBUG

当您知道“drop”事件的样子后，create an artificial one 并将其发送到小部件。

[编辑] 如果您编写自己的文件上传小部件，那么我建议将“drop”事件记录到控制台。对于许多现代浏览器，您将在控制台中获得一个可以检查的活动元素。使用它来找出使用了哪些对象以及每个插槽中的值。

这应该为您提供足够的信息来从测试用例创建这样的事件。我建议在测试期间使用 jQuery，因为它有一个很好的框架来从头开始构建事件。

【讨论】：

我正在测试一个自定义文件上传器。
除一个问题外，您的所有问题都在我的原始帖子中得到了解答。 :) 我可以建立一个解决方法，但不喜欢它可能的脆弱性。我也不使用 jQuery。
创建一个使用 jQuery 并且只测试文件上传器的小测试用例。这样，您就可以运行测试，而无需启动庞大的真实应用程序。
我无法从您的上一条评论中获得任何有用的信息。请更详细一点。另外，为什么您认为我的应用程序很大？ :) 另外，您为什么要回答我从未问过的问题？我有一个相当具体的要求。有一个浏览器（最好是无头的），里面有一个带有 FileList 的 drop 事件，我想以某种方式模拟它。
我试图让答案有点笼统，以使它们对不止一个人有用。我不知道有一种浏览器可以模拟开箱即用的文件删除事件并寻找其他答案的缺乏，其他人也是如此。