Protractor: Drag-Drop function working with Mozill

问题:

I am trying to automate a drag-drop action using protractor. The element's properties are:

Element that needs to be dragged:

<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="">

The location where the element needs to be dropped:

<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>

I am using a drag-drop-helper native script which I found in 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)

}

The problem is that the drag-drop action is working in Mozilla and Chrome browsers. But giving error: UnknownError: JavaScript error (WARNING: The server did not provide any stacktrace information) on running the browser.executeScript command in Internet Explorer 11.

I am implementing the code in following way:

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());

I verified the browser.executeScript command by running browser.executeScript('javascript:localStorage.clear(); alert("HelloWorld");'); and its working fine with IE11.
Can someone give me an idea what i am missing here?

回答1:

I got this error fixed.
The IE 11 browser doesn't support CustomEvent constructor in the line:var event = new CustomEvent("CustomEvent").
Change CustomEvent to createEvent. var event=document.createEvent("CustomEvent");. Works like a Charm!!