如何在E2E AngularJS测试中上传文件

Question

在我的一个视图中，我有一个文件上传控件。它支持文件通过拖放或单击按钮后打开的标准文件对话框上传。

。

如何在我的E2E测试中执行此操作 ¹ ？

---

¹ 只有两个选项之一就足够

Answer 1

您可以使用JavaScript Blob上传文件。这需要FELEAPI，它与较旧的浏览器不兼容（http://caniuse.com/fileapi）。但是，由于您提到了使用使用fileapi的拖放上载，所以它不太重要。

有两种方法可以使用BLOB API上传文件。一个非常容易，另一个只是第一个的延续。

使用JavaScript，您可以使用：

创建一个新的斑点

var blob = new Blob("content", contentType);

例如，这将创建一个包含文本" Hello World！"的斑点对象。

var foo = new Blob("Hello World!", {type: "text/plain"});

---

您也可以使用以下方法更适合非plaintext文件，例如PDF。您必须将文件转换为base64（可以使用类似的东西），并使用base64数据创建斑点。

使用此函数（稍微修改的版本）创建斑点。

function b64toBlob(b64Data, contentType, sliceSize) {
b64Data = b64Data.replace(/s/g, '');
contentType = contentType || '';
sliceSize = sliceSize || 1024;
function charCodeFromCharacter(c) {
    return c.charCodeAt(0);
}
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    var slice = byteCharacters.slice(offset, offset + sliceSize);
    var byteNumbers = Array.prototype.map.call(slice, charCodeFromCharacter);
    var byteArray = new Uint8Array(byteNumbers);
    byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
}

例如，这将创建一个PDF BLOB对象。

var pdf = "JVBERi0xLjQKJcfsj6IKNSAwIG9...=="; //base64 encoded file as a String
var pdfBlob = b64toBlob(pdf, "application/pdf", 1024);

---

使用上面的一种方法创建斑点后，可以将其视为文件。例如，您可以将文件放入formdata对象（如果您这样做这样的上传）：

var fd = new FormData();
fd.append("uploadedFile", pdfBlob, "My PDF.pdf"*);

*fileName参数似乎仅在Chrome上工作。