模拟文件拖放以在量角器中上载 [英] Simulate drag and drop of file to upload in Protractor
本文介绍了模拟文件拖放以在量角器中上载的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想通过将文件拖动到页面中的放置区域来测试文件上传,但是我找不到模拟从桌面文件夹中拖动文件的方法. 我设法找到的唯一方法是以下方法-
I want to test file upload, by dragging file to the drop zone in the page, however I can't find a way to simulate file dragging from the desktop folder. The only way I managed to found is the following one -
desktop.browser.actions().dragAndDrop(elem,target).mouseUp().perform();(Protractor)
据我所知,它仅拖动css元素.
However as far as I can understand, it drags only css element.
推荐答案
这是一个有效的示例,用于模拟从桌面到放置区域的文件放置:
This is a working example to simulate a file drop from the desktop to a drop area:
const dropFile = require("./drop-file.js");
const EC = protractor.ExpectedConditions;
browser.ignoreSynchronization = true;
describe('Upload tests', function() {
it('should drop a file to a drop area', function() {
browser.get('http://html5demos.com/file-api');
// drop an image file on the drop area
dropFile($("#holder"), "./image.png");
// wait for the droped image to be displayed in the drop area
browser.wait(EC.presenceOf($("#holder[style*='data:image']")));
});
});
drop-file.js
的内容:
var fs = require('fs');
var path = require('path');
var JS_BIND_INPUT = function (target) {
var input = document.createElement('input');
input.type = 'file';
input.style.display = 'none';
input.addEventListener('change', function () {
target.scrollIntoView(true);
var rect = target.getBoundingClientRect(),
x = rect.left + (rect.width >> 1),
y = rect.top + (rect.height >> 1),
data = { files: input.files };
['dragenter','dragover','drop'].forEach(function (name) {
var event = document.createEvent('MouseEvent');
event.initMouseEvent(name, !0, !0, window, 0, 0, 0, x, y, !1, !1, !1, !1, 0, null);
event.dataTransfer = data;
target.dispatchEvent(event);
});
document.body.removeChild(input);
}, false);
document.body.appendChild(input);
return input;
};
/**
* Support function to drop a file to a drop area.
*
* @view
* <div id="drop-area"></div>
*
* @example
* dropFile($("#drop-area"), "./image.png");
*
* @param {ElementFinder} drop area
* @param {string} file path
*/
module.exports = function (dropArea, filePath) {
// get the full path
filePath = path.resolve(filePath);
// assert the file is present
fs.accessSync(filePath, fs.F_OK);
// resolve the drop area
return dropArea.getWebElement().then(function (element) {
// bind a new input to the drop area
browser.executeScript(JS_BIND_INPUT, element).then(function (input) {
// upload the file to the new input
input.sendKeys(filePath);
});
});
};
这篇关于模拟文件拖放以在量角器中上载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文