Simuliere das Ziehen und Ablegen der Datei zum Hochladen in den Winkelmesser

Question

Ich möchte den Dateiupload testen, indem ich die Datei in den Ablagebereich auf der Seite ziehe, aber ich finde keine Möglichkeit, das Ziehen von Dateien aus dem Desktopordner zu simulieren. Der einzige Weg, fand ich es geschafft, ist die folgende -

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

aber soweit ich verstehen kann, es zieht nur CSS-Element.

Answer 1

Dies ist ein funktionierendes Beispiel eine Datei Drop vom Desktop auf einem Ablegebereich zu simulieren:

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']"))); 
    }); 

}); 

Der Inhalt 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

Sie können ein Element nicht mit dem Winkelmesser von Ihrem Desktop ziehen, da seine Aktionen auf die Funktionen des Browsers beschränkt sind.

Möglicherweise müssen Sie in Erwägung ziehen, vom Desktop in den Arbeitsspeicher zu ziehen (es sei denn, Sie möchten Ihr Betriebssystem testen), und überprüfen Sie, ob die Datei ordnungsgemäß funktioniert.

Eine Möglichkeit, das zu erreichen ist mit dem folgenden:

dropElement.sendKeys(path); 

Zum Beispiel, wenn das Element ist, wie üblich, eine Eingabe vom Typ Datei:

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

Beachten Sie, dass path sollte das sein Absoluter Pfad zu der Datei, die Sie hochladen möchten, z. B. /Users/me/foo/bar/myFile.json oder c:\foo\bar\myFile.json.