使用量角器为离子应用程序创建一些测试，以测试用户是否可以在 chrome 上成功拖放元素

Question

我正在为带有 protractor 的 ionic 应用程序创建一些测试，以测试用户是否可以在 chrome 上成功拖放元素。我首先尝试使用 mouseDown()、mouseMove() 和 mouseUp()，如下例所示：

it ('should destroy card after swipe', function() {
    var card1Move = {x: 200, y: 0};

    browser.actions()
        .mouseMove(card1)
        .mouseDown()
        .mouseMove(card1Move)
        .mouseUp()
        .perform();

    browser.sleep(500);
    expect(card1.isPresent()).toBeFalsy();
});

但是没有用。然后我尝试使用内置的 dragAndDrop() 方法，如下所示：

it ('should destroy card after swipe', function() {
    var card1Move = {x: 200, y: 0};

    browser.actions()
        .dragAndDrop(card1, card1Move)
        .mouseUp()
        .perform();

    browser.sleep(500);
    expect(card1.isPresent()).toBeFalsy();
});

但是也没用。你知道我的代码有什么问题吗？预先感谢您的回复！

Answer 1

如果拖放是 HTML5 实现，那么最好的机会可能是使用 executeScript 模拟事件：

browser.executeScript(dragAndDrop, card1.getWebElement(), 200, 0);

var dragAndDrop = function(source, offsetX, offsetY){      
  var rect = source.getBoundingClientRect();
  var dragPt = {x: rect.left + (rect.width >> 1), y: rect.top + (rect.height >> 1)};
  var dropPt = {x: dragPt.x + offsetX, y: dragPt.y + offsetY};
  var target = source.ownerDocument.elementFromPoint(dropPt.x, dropPt.y);
  var dataTransfer = {
    items: {},
    types: [],
    files: [],
    setData: function (format, data) {
      this.items[format] = data;
      this.types.push(format);
    },
    getData: function (format) { return this.items[format]; },
    clearData: function (format) { delete this.items[format]; }
  };

  emit(source, 'mouseover mouseenter mousedown dragstart dragenter drag dragover dragleave', dragPt);
  emit(target, 'dragenter dragover drop', dropPt);
  emit(source, 'dragend', dropPt);

  function emit (element, events, pt, data) {
    events.split(' ').forEach(function(event){
      var evt = source.ownerDocument.createEvent('MouseEvent');
      evt.initMouseEvent(event, !0, !0, window, 0, 0, 0, pt.x, pt.y, !1, !1, !1, !1, 0, null);
      if (/^drag|^drop/.test(event)) evt.dataTransfer = dataTransfer;
      element.dispatchEvent(evt);
    });
  };
};