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

例如，如果该元素像往常一样输入类型为file：

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

请注意，path应该是您要上传的文件的绝对路径，例如/Users/me/foo/bar/myFile.json或c:\foo\bar\myFile.json。

模拟拖放文件以在Protractor中上传

2 个答案: