Dropzone.js:在php-webdriver集成测试中上传没有浏览对话框的文件

问题描述 投票:0回答:1

我在我的项目中使用dropzone.js,我想要做的是手动添加文件到队列而不打开文件浏览器对话框,dropzone已经在页面上的.imageDropzone类的元素上初始化,我试图运行以下脚本添加文件,

Dropzone.autoDiscover=false;
var myZone=Dropzone.forElement('.imageDropzone');
var fileList=$("input[accept='image/jpg,image/gif,image/png,image/jpeg']")[0].files;
fileList.name="imageUploadTestJPG.jpg";
fileList.type="image/jpeg";
fileList.size=30170,
fileList.path="http://mysite/img/imageUploadTestJPG.jpg";
fileList.mozFullPath="http://mysite/img/imageUploadTestJPG.jpg";
fileList.accept="image/jpg,image/gif,image/png,image/jpeg";

console.log(fileList);
myZone.addFile(fileList);

why am I doing this

1.我正在使用php-webdriver,我需要测试上传功能,

2.单击文件类型输入后打开的文件浏览器对话框取决于操作系统,在不同的操作系统中有所不同,我无法将控制权转移到该窗口,所以我想跳过这个打开文件对话框的过程,点击它并希望手动添加文件javascript / jquery并保持autoProcessFiles=true,以便尽快添加文件,上传过程开始,但我无法解决它。

当我试着打电话给Dropzone.addFile()我收到以下内容

TypeError:FormData.append的参数2未实现接口Blob

我事件尝试了另一种方式,即

1.将文件路径添加到初始化dropzone的文件输入,因为dropzone将change eventlistener与使用dropzone初始化的所有file inputs绑定,并且一旦提供了文件路径,change event listener就会触发并开始上传文件,但是尝试使用dropzone初始化的凸起安全异常修改文件输入的值。

2.此外<input type=file>在初始化时被dropzone.js脚本隐藏,并且php-webdriver不允许与隐藏元素交互,所以我坚持这一点,任何帮助或指导将不胜感激。

javascript jquery selenium dropzone.js facebook-php-webdriver
1个回答
2
投票

做完后,

问题是提供给myZone.addFile()的FileList对象的格式。如果你打开dropzone.js文件并转到那里的Dropzone.prototype.init函数,你会看到一个检查

if (this.clickableElements.length) {

在这个检查中,dropzone创建并配置隐藏文件输入,然后将该输入元素附加到正文document.body.appendChild(_this.hiddenFileInput);,然后在此行dropzone将change eventlistener添加到创建的文件类型输入后,一旦我们通过浏览文件提供文件就会触发窗口。

return _this.hiddenFileInput.addEventListener("change", function() {

当我们提供文件时它会触发并创建FileList对象

files = _this.hiddenFileInput.files;

如果您尝试在控制台console.log(files)中记录它,您将看到在firebug中单击此对象时创建的文件列表FileList { 0=File, length=1, item=item(), more...}您将在下面看到详细信息

0          File { size=21789, type="image/png", name="1-7-2013 6-19-44 PM.png", more...}
length      1
__proto__   FileListPrototype { item=item(), @@iterator=@@iterator()}

现在我正在创建文件列表对象的方式结果如下

_removeLink -----  a.dz-remove javascrip...defined; 
accept      -----  "image/jpg,image/gif,image/png,image/jpeg"   
accepted    -----  true 
mozFullPath -----  "http://mysite/img/imageUploadTestJPG.jpg"   
name        -----  "imageUploadTestJPG.jpg" 
path        -----  "http://mysite/img/imageUploadTestJPG.jpg"   
previewElement --   div.dz-preview  
previewTemplate --- div.dz-preview  
processing    ----- true    
size                30170   
status        ----- "uploading"
type                "image/jpeg"    
upload        -----  Object { progress=0, total=30170, bytesSent=0}
xhr            XMLHttpRequest { readyState=1, timeout=0, withCredentials=false, more...}
length             0
__proto__          FileListPrototype { item=item(), @@iterator=@@iterator()}

注意第一个细节上的索引0包含文件的细节,而第二个是我自定义构建的FileList对象的结果,它包含文件的所有细节而不是索引0

因此,要创建一个类似于我必须首先获取blob的对象,方法是将xmlHttpRequest请求发送到图像并指定arraybuffer的响应类型,然后获取图像数据的blob URL,然后将该响应分配给文件对象并分配这对input.file并称为Dropzone.addFile()。该过程的完整描述如下,您可以在不打开文件浏览窗口的情况下上传文件,并使用dropzone.js与selenium

// Simulate a call to  service that can
// return an image as an ArrayBuffer.
var xhr = new XMLHttpRequest();

// Use JSFiddle logo as a sample image to avoid complicating
// this example with cross-domain issues.
xhr.open( "GET", "http://localhost/path/to/my/image.jpg", true );

// Ask for the result as an ArrayBuffer.
xhr.responseType = "arraybuffer";

xhr.onload = function( e ) {
    // Obtain a blob: URL for the image data.
    var arrayBufferView = new Uint8Array( this.response );
    var blob = new Blob( [ arrayBufferView ], { type: "image/jpeg" } );
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL( blob );

    var parts = [blob, new ArrayBuffer()];

    file = new File(parts, "imageUploadTestFile", {
        lastModified: new Date(0), // optional - default = now
        type: "image/jpeg" 
    });

    $("input[accept=\'image/jpg,image/gif,image/png,image/jpeg\']").files = [file];
    myzone = Dropzone.forElement(".imageDropzone");
    myzone.addFile(file);
};
xhr.send();
© www.soinside.com 2019 - 2024. All rights reserved.