HTML5文件上传的单元测试

Posted 2023-03-04

【中文标题】HTML5文件上传的单元测试

【英文标题】：Unit test of HTML5 file upload

【发布时间】：2013-06-11 05:37:09

【问题描述】：

有没有办法对使用 html 5 File API 上传文件进行 javascript 单元测试？ 例如我有代码：

<form method="POST" enctype="multipart/form-data">
  <input type="file" id="fileselect" name="fileselect[]" multiple="multiple"/>
</form>

<script type="text/javascript">
   function fileSelectHandler(e) 
       var files = e.target.files || e.dataTransfer.files;
       // at this point, files is a FileList object
   

   var fileselect = document.getElementById("fileselect");
   fileselect.addEventListener("change", fileSelectHandler, false);
</script>

所以我想用 javascript 自动化这个，所以我可以对它进行单元测试。所以我需要触发更改事件，并以某种方式传递文件。最后，每个文件都应该是一个 HTML 5 File 对象，具有我想要的自定义路径。

【问题讨论】：

您不能使用 JavaScript 设置 file 输入的值，为此您需要某种浏览器扩展。但是，您为什么要尝试测试浏览器输入的功能，为什么不将文件对象作为测试的一部分？

罗伯特，我的“复杂”代码从文件变量开始，它是一个文件列表。如何使 FileList 成为指向硬盘上实际文件的 File 对象列表？

我已经说过你不能，但即使你可以，如果你选择带有input 元素的文件的测试失败了，这能证明你的应用程序是什么？您是否打算向各个浏览器供应商发送 C++ 补丁？

我的代码比这长得多，它继续使用 File 对象，解析文件，通过 AJAX POST 调用将它们上传到某个服务器等。所以我的目标是我的其余部分javascript 代码，而不是文件的选择。

我还没有找到办法。我还想测试我的上传函数，该函数将接受 File 或 FileList 作为其参数之一。

【参考方案1】：

我不确定这是否会有所帮助，但是将 iMacros 用于 firefox 怎么样？您可以录制一个执行您想要的所有操作的宏，然后按您想要的频率运行它。它非常易于使用，并且适用于我几乎所有的 UI 测试。

iMacros firefox plugin