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

Creating some tests for an ionic app with protractor to test if the user can successfully drag and drop an element on chrome

本文关键字：测试 成功 是否 用户 元素 拖放 chrome 量角器 应用程序 创建      更新时间：2023-09-26

我正在为带有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();
});

但它也不起作用。你知道我的代码有什么问题吗？提前感谢您的回复！

如果拖放是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);
    });
  };
};
相关文章：