投射器でアップロードするファイルのドラッグ＆ドロップをシミュレート

Question

ファイルをドラッグしてファイルのアップロードをテストしたいが、デスクトップのフォルダからドラッグしてファイルをシミュレートする方法が見つからない。しかし、私の知る限りが理解できるように、それが唯一のCSSの要素をドラッグ

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

- 私が見つけたために管理 唯一の方法は、次の1です。

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

その要素は、通常通り、型ファイルの入力された場合：pathあるべきこと

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

注アップロードするファイルの絶対パス（/Users/me/foo/bar/myFile.jsonやc:\foo\bar\myFile.jsonなど）。