wil*_*747 5 javascript drag-and-drop repeater protractor
有几个类似于这个问题的问题,我已经阅读了所有这些问题.但是,我仍然无法让量程序在量角器中按预期工作.
我有一个可拖动的项目列表,我需要在重新安排后测试结果.但是我无法让拖放工作正常工作.这是我到目前为止的简化模拟.
辅助功能:
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();
});
});
});
Run Code Online (Sandbox Code Playgroud)
我用这样的文字调用move helper函数:
moveIndexToIndex(2, 5);
Run Code Online (Sandbox Code Playgroud)
而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>
Run Code Online (Sandbox Code Playgroud)
如何进行拖放工作?难道我做错了什么?
通过对量角器的更新更改来解决此问题.我错过了.getWebElement()部分,它取代了.find()方法.
browser.actions().
mouseMove(startPoint.getWebElement(), {x: 0, y: 0}).
mouseDown().
mouseMove(endPoint.getWebElement()).
mouseUp().
perform();
Run Code Online (Sandbox Code Playgroud)