Question

有一些类似于这个问题的问题。我已经读完了所有这些。但是我仍然无法让量词序列在量角器中按预期工作。

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

辅助函数：

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>

如何进行拖放工作？我做错了吗？

Answer 1

通过对量角器的更新更改来解决此问题。我错过了.getWebElement（）部分，它取代了.find（）方法。

browser.actions().
        mouseMove(startPoint.getWebElement(), {x: 0, y: 0}).
        mouseDown().
        mouseMove(endPoint.getWebElement()).
        mouseUp().
        perform();

Answer 2

使用.dragAndDrop方法

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。它被弃用了。

Answer 3

我有同样的问题。对我来说，解决方案是遵循Selenium问题中的建议：https://code.google.com/p/selenium/issues/detail?id=3604#c20

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

我认为这也解决了this issue

Answer 4

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

Answer 5

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

对我有用的是我在GitHub中找到的解决方案：https://gist.github.com/druska/624501b7209a74040175
下载文件：＆＃34; native_js_drag_and_drop_helper.js＆＃34;

我正在分享＆＃34; native_js_drag_and_drop_helper.js＆＃34;的代码。

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

拖拽通过Repeater降落量角器

5 个答案: