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

Question

我想通过将文件拖到页面中的拖放区来测试文件上传，但是我找不到模拟从桌面文件夹拖放文件的方法。我设法找到的唯一方法是以下方法 -

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

然而据我所知，它只拖动 css 个元素。

Answer 1

您不能使用量角器从桌面拖动元素，其操作仅限于浏览器功能。

您可能需要考虑从桌面拖动来工作（除非您想测试您的操作系统），并检查一旦文件被提供给 HTML 元素，一切正常。

实现这一目标的一种方法是：

dropElement.sendKeys(path);

例如，如果该元素像往常一样是文件类型的输入：

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

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

Answer 2

这是一个模拟文件从桌面拖放到拖放区域的工作示例：

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

    });
  });
};

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

Simulate drag and drop of file to upload in Protractor

javascript

protractor

e2e-testing

angular