javascript - Protractor 拖放

Question

我有一个元素列表，所以我想编写一个函数来将这些元素拖到构建对象的容器中。目前，在我的 Protractor 测试中，我已经找到了该元素。该元素存在并显示。我遇到问题的唯一地方是当我尝试翻译或拖放其在屏幕上的位置时。目前我正在使用

browser.actions().dragAndDrop(element1.getWebElement(), { x: -500, y: 20 }).perform();

为了尝试将其向左拖动 -500px 和向下 20px，我还尝试了以下操作

browser.actions()
    .mouseDown(element1, {x:10, y:10}) //this show the hovered tool tip
    .mouseMove(element1, {x:11, y:11}) //do this to make it "grab" the element
    .mouseMove(element2, {x:50, y:50}) //translate its position into the container
    .mouseUp()
    .preform();
browser.sleep(3000)//allow time for it to drag and the animation to complete.

我不确定我是否使用了错误的移动元素，或者我是否有错误的元素，因此我们将不胜感激。

谢谢。

Answer 1

我也经历了很多这些解决方案，但这些解决方案都不适合我。对我有用的解决方案是导入新的 js 文件。我的js文件将此文件存储为dragdrop_helper.js

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

并在 Protractor 文件中使用此代码来拖放元素。

 var dragAndDropFn = require("../DraodropHelper/dragdrop_helper.js"); //this is your js file address
    var source = element(by.css('li[draggable="true"]'));
    var target = element(by.css('ul[class="dropElement"]'));
    browser.executeScript(dragAndDropFn, source.getWebElement(), target.getWebElement());

请根据您的应用更改选择器。希望对您有帮助