Question

我正在使用ionic为protractor应用创建一些测试，以测试用户是否可以成功拖放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);
    });
  };
};

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

1 个答案: