量角器拖放：Angular 与 Angular with HTML5

我在量角器测试中遇到了拖放问题（就像其他人一样），但一般情况下没有 - 仅在使用 HTML5 的角度应用程序中。

为了演示，我使用两个演示拖放功能的网页编写了一个小型量角器测试套件。 第一个页面（在第一个测试用例中使用）演示了 AngualarJS 中 jQueryUI 拖放功能的实现。这个工作得很好。 第二个页面（在第二个测试用例中使用）使用 HTML5 的 Angular 拖放。这个在我的测试中不起作用。

我的下一个尝试是使用这篇文章给我带来的辅助功能：https://gist.github.com/druska/624501b7209a74040175 https://gist.github.com/druska/624501b7209a74040175不幸的是，这对我不起作用，正如我的第三次测试所示

谁能告诉我为什么 HTML 5 的拖放功能不起作用以及我需要做什么才能让它运行？

提前谢谢了

Akki

我的系统：

• 量角器4.0.0
• 硒服务器独立2.53.1
• chromedriver 2.22
• iedriver 2.53.1
• 壁虎驱动程序 0.9.0

我的测试套件：

describe('Protractor drag-and-drop test', function() {

    afterEach(function(){
        browser.sleep(5000);
    });

  it('1st test - jQueryUI drag and drop for AngularJS', function() {
      //found here: http://stackoverflow.com/questions/24315571/drag-drop-with-protractor-by-repeater
      browser.get('http://codef0rmer.github.io/angular-dragdrop/#!/');
      var elem = element(by.css('.ui-draggable'));
      var target = element(by.css('.thumbnail'));
      browser.sleep(3000);

      elem.click();
      browser.actions().dragAndDrop(elem, target).perform();
  });

   it('2nd test - Angular drag & drop with HTML5', function() {
       browser.get('http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple');

       var elem =element.all(by.xpath("/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[2]/div/div[2]/ul/li[1]")).first();
       var target = $('ul[dnd-list=list]');

       expect(elem.getText()).toEqual("Item B1"); //Item that should be dragged and dropped
       expect(target.getText()).toContain("Item A1"); //element sorrounding "ItemA1", "Item A2", "ItemA3"

       elem.click();      
       browser.actions().dragAndDrop(elem, target).perform();
    });

    it('3rd test - Angular drag & drop with HTML5 with native_js_drag_and_drop_helper', function() {
       browser.get('http://marceljuenemann.github.io/angular-drag-and-drop-lists/demo/#/simple');
       var dragAndDropFn = require('./native_js_drag_and_drop_helper.js');

       var elem =element.all(by.xpath("/html/body/div[2]/div[2]/div[2]/div[1]/div[1]/div[2]/div/div[2]/ul/li[1]")).first();
        var target = $('ul[dnd-list=list]');

       expect(elem.getText()).toEqual("Item B1"); //Item that should be dragged and dropped
       expect(target.getText()).toContain("Item A1"); //element sorrounding "ItemA1", "Item A2", "ItemA3"

       elem.click();      
       browser.executeScript(dragAndDropFn, target.getWebElement(), elem.getWebElement());
    });

    xit(' 4th test - Test of native drag and drop helper ', function() {
        // test found on https://gist.github.com/druska/624501b7209a74040175 failing with "Angular could not be found on the page http://html5demos.com/drag : retries looking for angular exceeded"
        var dragAndDropFn = require('./native_js_drag_and_drop_helper.js');
        browser.get("http://html5demos.com/drag");
        var field = element.all(by.className('drag-handle')).get(0);
        var src = element.all(by.className('box-list-compact-hover')).get(0);
        browser.executeScript(dragAndDropFn, field.getWebElement(), src.getWebElement());
    }, 120000);
});

我的配置文件：

exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['spec.js'],
capabilities: {
  //browserName: 'internet explorer'
  browserName: 'chrome'
  //browserName: 'firefox'
  },
};

native_js_drag_and_drop_helper：

module.exports = function simulateDragDrop(sourceNode, destinationNode) {
var EVENT_TYPES = {
    DRAG_END: 'dragend',
    DRAG_START: 'dragstart',
    DROP: 'drop'
}

function createCustomEvent(type) {
    var event = new CustomEvent("CustomEvent")
    event.initCustomEvent(type, true, true, null)
    event.dataTransfer = {
        data: {
        },
        setData: function(type, val) {
            this.data[type] = val
        },
        getData: function(type) {
            return this.data[type]
        }
    }
    return event
}

function dispatchEvent(node, type, event) {
    if (node.dispatchEvent) {
        return node.dispatchEvent(event)
    }
    if (node.fireEvent) {
        return node.fireEvent("on" + type, event)
    }
}

var event = createCustomEvent(EVENT_TYPES.DRAG_START)
dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event)

var dropEvent = createCustomEvent(EVENT_TYPES.DROP)
dropEvent.dataTransfer = event.dataTransfer
dispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)

var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END)
dragEndEvent.dataTransfer = event.dataTransfer
dispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)
}

我对各种 dnd 模拟库也有同样的问题，这些库似乎不适用于角度拖放列表。

最后我分叉了html-dnd https://github.com/Kuniwak/html-dnd简单地添加一个拖拽事件，角度拖放列表需要一些东西，因为它计算通过拖拽事件放置的元素的索引。它还会粘在一个 temp li 元素中，代码在删除它之前将其用作实际的放置点。这就是用户在屏幕上看到的移动列表点。

叉子位于分叉的 html-dnd https://github.com/PloughingAByteField/html-dnd。我通过 git pull 将其包含在我的 package.json 文件中的依赖项中

"html-dnd": "git://github.com/PloughingAByteField/html-dnd.git"

用于量角器

// at the top of the spec
var dragAndDrop = require('html-dnd').code;

<snip>

it('should dragover and drop', function() {
  var draggable = browser.findElement(by.id('id1'));
  var droppable = browser.findElement(by.id('id2'));
  browser.driver.executeScript(dragAndDrop, draggable, droppable);
);

更新： html-dnd 项目已合并到 Dragover 事件中，因此您可以使用它来代替我未维护的 fork。