量角器拖放 [英] Protractor Drag And Drop

问题描述

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

I have a list of elements so i want to write a function to drag those elements into a container that builds up an object. At the moment in my protractor tests I have found the element. The element is present and is displayed. The only place I'm running into problems is when I try to translate or drag and drop its position on the screen. At the moment i'm using

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

为了尝试将其向左-500px向下拖动20px，我还尝试了以下方法

In order to try drag it -500px to the left and 20px down i've also tried the following

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.

我不确定我是否使用了move元素错误或元素使用错误，因此将不胜感激.

I'm not sure if i'm using the move elements wrong or if I have the wrong elements so any help would be appreciated.

谢谢.

推荐答案

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

I also go through many to these solutions but none of those work for me. the solution that work for me is to import the new js file. there is my js file store this file as 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)
}

并在量角器文件中使用此代码拖放元素.

and use this code in your protractor file to drag and drop your element.

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

请将选择器更改为特定于您的应用程序.希望对您有帮助

kindly change the selector as specific to your app. I hope that would help you

这篇关于量角器拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！