我正在构建一个 Web 应用程序，它涉及将文件从用户系统拖放到浏览器窗口中。
我想使用一种可用的 headless 浏览器(出于测试驱动开发的目的)自动执行用户与 UI 的交互，以便虚拟 DOM 获取文件放置事件。
我花了两个小时寻找开箱即用的解决方案，但没有成功。 唯一可以自动化的是使用 input[type=file] 上传单个文件。 这不是我想要的。
是否有适用于 Mac OS X 或 Linux 的现成解决方案？
最佳答案
我不知道什么好的解决方案，但我有几个解决方法:
您可以在虚拟机或 Linux 上的 Xnest 或 VNC 服务器中运行浏览器。这给了你一个用户界面。 VNC 等协议(protocol)还允许您模拟鼠标，因此您可以打开文件浏览器并真正将文件拖到上面。
Pro:做真实的事情。
缺点:易碎。需要进行大量设置工作。
你到底在测试什么？浏览器中的文件上传组件？还是处理服务器上的文件？
如果您使用现有/盒装组件进行多文件上传，那么为什么要测试它？给你写的人不测试吗？为什么要复制这项工作？
如果您只对服务器是否正确处理文件感兴趣，请使用 HTTP 客户端库手动上传。使用像 Charles 这样的 HTTP 代理必要时查看真实客户端和服务器之间发生了什么。
如果您想测试您的应用程序和小部件的交互，事情就会变得棘手。要对此进行测试，您需要在浏览器中启用日志记录/调试以查看在放置期间触发了哪些事件。 JavaScript 允许您创建任何事件。对于 phantomjs，尝试 --webdriver-loglevel=DEBUG
当你知道“drop”事件的样子时，create an artificial one并将其发送到小部件。
[编辑] 如果您编写自己的文件上传小部件，那么我建议将“drop”事件记录到控制台。对于许多现代浏览器，您将在控制台中获得一个可以检查的事件元素。使用它来找出使用了哪些对象以及每个槽中的值是什么。
这应该会给您足够的信息来从测试用例中创建这样的事件。我建议在测试期间使用 jQuery，因为它有一个很好的框架可以从头开始构建事件。
关于javascript - 如何自动将文件拖放到 headless 浏览器的窗口中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18209785/