Javascript 拖放；用量角器通过中继器下降

有几个问题与此类似&我都读过了。然而，我仍然无法让动作序列在量角器中按预期工作

我有一个可拖动的项目列表，我需要在重新安排后测试结果。但是，我无法使拖放正确工作。这是一个我到目前为止所拥有的简化模型

助手功能：

var getRow = function (num){
      return element(by.repeater('p in pList').row(num - 1));
};

var getField = function (rowNum){
    return getRow(rowNum).findElement(by.css('td.ng-binding'));
};

var moveIndexToIndex = function (startIndex, endIndex) { 
  return getField(endIndex).then(function (endPoint) {
      getField(startIndex).then(function (startPoint) { 
          // browser.actions().dragAndDrop(startPoint, endPoint).perform(); // doesn't work either
          browser.actions().
            mouseMove(startPoint, {x: 0, y: 0}).
            mouseDown().
            mouseMove(endPoint).
            mouseUp().
            perform();   
      });
    });
});

我使用如下文字调用move helper函数：

moveIndexToIndex(2, 5);

html看起来像这样：

<tbody>
          <!-- ngRepeat: p in pList -->
          <tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 1</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 2</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 3</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 4</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 5</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 6</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 7</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 8</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 9</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 10</td>
          </tr>
          <!-- end ngRepeat: p in pList -->
</tbody>

DummyValue 1
DummyValue 2
DummyValue 3
DummyValue 4
DummyValue 5
DummyValue 6
DummyValue 7
DummyValue 8
DummyValue 9
DummyValue 10

---

我怎样才能拖拖拉拉地去上班？我做错什么了吗？

使用

.dragandrop

方法

var moveIndexToIndex = function (startIndex, endIndex) { 
  return getField(endIndex).then(function (endPoint) {
      getField(startIndex).then(function (startPoint) { 
          // browser.actions().dragAndDrop(startPoint, endPoint).perform(); // doesn't work either
          browser.actions().
            dragAndDrop(startPoint, {x: (startIndex - endIndex) * 400, y: 0}).
            perform(); 
      });
    });
});

我不确定你将如何计算

x

和

y

。但你通常是这样做的

---

作为旁注，请使用

$

而不是

findElement

。它被弃用了

通过对量角器的更新修改修复了此问题。我缺少替换.find（）方法的.getWebElement（）部分

---

我也有同样的问题。我的解决方案是遵循硒问题中的建议：

从@willko747的例子开始，我的解决方案如下：

browser.actions()
    .mouseMove(startPoint.getWebElement(), {x: 0, y: 0})
    .mouseDown()
    .mouseMove(startPoint.getWebElement(), {x: 5, y: 5}) // Initial move to trigger drag start
    .mouseMove(endPoint.getWebElement())
    .mouseUp()
    .perform(); 

---

我想这也解决了

上面提到的所有解决方案都不适合我。 我可以看到（要拖动的）元素被选中，鼠标光标变为4向滚动箭头。但是，拖动没有发生。

对我有效的是我在GitHub中找到的解决方案：
下载文件：“native_js_drag_and_drop_helper.js”

我正在分享“native_js_drag_和_drop_helper.js”的代码

此拖放功能的实现：

var dragAndDropFn = require("./../../../TestScripts/CommonFunctions/native_js_drag_and_drop_helper.js");
var inputX = element(by.xpath("XPATH OF ELEMENT TO BE MOVED"));
var targetX = element(by.xpath("XPATH OF THE TARGET LOCATION"));
browser.executeScript(dragAndDropFn, inputX.getWebElement(), targetX.getWebElement());

---

运行这个时会发生什么？它没有错误消息，只是传递了我在其中的伪expect语句。我可以看到它试图单击起始点元素，但没有拖动。@willko747我试图执行拖放操作，我可以拖动项目，但不能将其拖放到指定的位置。你能给我提个建议吗？嗯，还是和上面的建议一样。它似乎试图单击，但仍然没有发生拖动。

elementToDrag.click();
browser.actions().dragAndDrop(elementToDrag, locationToDragTo))).perform();

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

var dragAndDropFn = require("./../../../TestScripts/CommonFunctions/native_js_drag_and_drop_helper.js");
var inputX = element(by.xpath("XPATH OF ELEMENT TO BE MOVED"));
var targetX = element(by.xpath("XPATH OF THE TARGET LOCATION"));
browser.executeScript(dragAndDropFn, inputX.getWebElement(), targetX.getWebElement());