模擬在量角器中上傳文件的拖放

Question

我想通過將文件拖動到頁面中的拖放區域來測試文件上載，但是我找不到一種方法來模擬從桌面文件夾拖動文件。 我設法找到的唯一方法是以下一個 -

desktop.browser.actions().dragAndDrop(elem,target).mouseUp().perform();(Protractor) 

但是據我可以理解，它只是拖動的CSS元素。

Answer 1

這是一個工作示例來模擬從桌面到拖放區域文件放置：

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); 

    }); 
    }); 
}; 

Answer 2

您不能使用量角器從桌面拖動元素，其操作僅限於瀏覽器功能。

你可能不得不考慮從桌面拖動到工作（除非你想測試你的操作系統），並檢查一旦文件給了HTML元素，一切正常。爲實現這一

的一種方式是具有以下：

dropElement.sendKeys(path); 

例如，如果該元素是，像往常一樣，文件的類型的輸入：

$('input[type="file"]').sendKeys(path); 

注意path應該是您要上傳的文件的絕對路徑，例如/Users/me/foo/bar/myFile.json或c:\foo\bar\myFile.json。