量角器：拖放功能适用于 Mozilla 和 chrome，但不适用于 Internet Explorer 11答案

【问题标题】：Protractor: Drag-Drop function working with Mozilla and chrome but not with Internet Explorer 11量角器：拖放功能适用于 Mozilla 和 chrome，但不适用于 Internet Explorer 11
【发布时间】：2016-04-27 08:17:25
【问题描述】：

我正在尝试使用量角器自动执行拖放操作。该元素的属性是：

需要拖动的元素：

<li id="activities-test123" class="ng-binding ng-scope ng-isolate-scope draggable" tooltip-placement="right" ng-attr-tooltip="{{activity.name.length > relationships.nameLimit ? activity.name : ''}}" draggable="true" ng-class="{'draggable-disabled': activity.entityHasActivity, 'draggable': !activity.entityHasActivity}" ng-repeat="activity in relationships.activities | toArray:false | filter:searchActivities:strict" tooltip="">

需要放置元素的位置：

<div class="tree-view ng-isolate-scope" drop="relationships.handleDrop" datasource="relationships" droppable="">
<p class="content-help-text ng-hide" ng-hide="relationships.hasEntity()">Drag an entity here</p>
<div ui-tree="relationships.options">
<ol class="top-level ng-isolate-scope" droppable="" ui-tree-nodes="">
<!-- ngRepeat: item in relationships.tree -->
</ol>
</div>
</div>

我正在使用我在 GitHub 中找到的拖放助手本机脚本

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)

}

问题在于拖放操作在 Mozilla 和 Chrome 浏览器中有效。但给出错误： UnknownError: JavaScript 错误（警告：服务器未提供任何堆栈跟踪信息） 在 Internet Explorer 11 中运行 browser.executeScript 命令。

我正在通过以下方式实现代码：

var DragAndDrop = require("./../native_js_drag_and_drop_helper.js");
var input = element(by.xpath("XPATH OF ELEMENT TO BE MOVED"));
var target = element(by.xpath("XPATH OF THE TARGET LOCATION"));
browser.executeScript(DragAndDrop, input.getWebElement(), target.getWebElement());

我通过运行 browser.executeScript('javascript:localStorage.clear(); alert("HelloWorld");'); 验证了 browser.executeScript 命令，它在 IE11 上运行良好。
有人可以告诉我我在这里缺少什么吗？

【问题讨论】：

标签： angularjs drag-and-drop automation protractor

【解决方案1】：

我已修复此错误。
IE 11 浏览器不支持行中的 CustomEvent 构造函数：var event = new CustomEvent("CustomEvent")。
将 CustomEvent 更改为 createEvent。 var event=document.createEvent("CustomEvent");。像魅力一样工作！

【讨论】：