拖曳通过中继器放弃量角器 [英] Drag & Drop with Protractor by Repeater

问题描述

我是新来的量角器和Webdriver这样裸露我。

有一些问题类似于这一个&我已经读完了。但是我仍然无法使动作序列在量角器中按预期方式工作。

我有一个可拖动的项目列表，我需要测试结果后重新安排。但是我无法使拖放正常工作。这是一个简单的模型，我迄今为止。

帮助函数：

  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（）; //不起作用
 browser.actions（）。
 mouseMove（startPoint，{ x：0，y：0}）
 mouseDown（）。
 mouseMove（endPoint）
 mouseUp（）
 perform（）; 
}）; 
}）; 
}）; 
  

我正在使用文字调用move助手功能：

  moveIndexToIndex（2，5）; 
  

而且html看起来像这样：

 < TBODY> 
<！ -  ngRepeat：p in pList  - > 
< tr ng-repeat =p in pListeg-draggable =peg-droppable =eg-droppableclass =ng-scopedraggable =truestyle =cursor：move ;> 
< td class =ng-binding> DummyValue 1< / td> 
< / tr><！ -  end ngRepeat：p in pList  - >< trng-repeat =p in pListeg-draggable =peg-droppable =eg- droppableclass =ng-scopedraggable =truestyle =cursor：move;> 
< td class =ng-binding> DummyValue 2< / td> 
< / tr><！ -  end ngRepeat：p in pList  - >< trng-repeat =p in pListeg-draggable =peg-droppable =eg- droppableclass =ng-scopedraggable =truestyle =cursor：move;> 
< td class =ng-binding> DummyValue 3< / td> 
< / tr><！ -  end ngRepeat：p in pList  - >< trng-repeat =p in pListeg-draggable =peg-droppable =eg- droppableclass =ng-scopedraggable =truestyle =cursor：move;> 
< td class =ng-binding> DummyValue 4< / td> 
< / tr><！ -  end ngRepeat：p in pList  - >< trng-repeat =p in pListeg-draggable =peg-droppable =eg- droppableclass =ng-scopedraggable =truestyle =cursor：move;> 
< td class =ng-binding> DummyValue 5< / td> 
< / tr><！ -  end ngRepeat：p in pList  - >< trng-repeat =p in pListeg-draggable =peg-droppable =eg- droppableclass =ng-scopedraggable =truestyle =cursor：move;> 
< td class =ng-binding> DummyValue 6< / td> 
< / tr><！ -  end ngRepeat：p in pList  - >< trng-repeat =p in pListeg-draggable =peg-droppable =eg- droppableclass =ng-scopedraggable =truestyle =cursor：move;> 
< td class =ng-binding> DummyValue 7< / td> 
< / tr><！ -  end ngRepeat：p in pList  - >< trng-repeat =p in pListeg-draggable =peg-droppable =eg- droppableclass =ng-scopedraggable =truestyle =cursor：move;> 
< td class =ng-binding> DummyValue 8< / td> 
< / tr><！ -  end ngRepeat：p in pList  - >< trng-repeat =p in pListeg-draggable =peg-droppable =eg- droppableclass =ng-scopedraggable =truestyle =cursor：move;> 
< td class =ng-binding> DummyValue 9< / td> 
< / tr><！ -  end ngRepeat：p in pList  - >< trng-repeat =p in pListeg-draggable =peg-droppable =eg- droppableclass =ng-scopedraggable =truestyle =cursor：move;> 
< td class =ng-binding> DummyValue 10< / td> 
< / tr> 
<！ -  end ngRepeat：p in pList  - > 
< / tbody> 
  

我如何可以拖放工作？我做错了吗？

解决方案

使用量角器更新更改。我错过了.getWebElement（）部分，取代了.find（）方法。

  browser.actions（）。 
 mouseMove（startPoint.getWebElement（），{x：0，y：0}）。 
 mouseDown（）。 
 mouseMove（endPoint.getWebElement（））。 
 mouseUp（）。 
 perform（）; 
  

I am new to Protractor and Webdriver so bare with me.
There are a few questions similar to this one & and I have read them all. However I still can't get the Action Sequence to work as expected in protractor.

I have a list of items that are draggable and I need to test results after they are re-arranged. However I can't get the dragging/dropping to work correctly. Here is a simplified mock up of what I have so far.

helper functions:

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

I am calling the move helper function with literals like so:

moveIndexToIndex(2, 5);

And the html look something like this:

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

How can I get dragging and dropping to work? Am I doing something wrong?

解决方案

Fixed this with the updated changes to protractor. I was missing the .getWebElement() part which replaced the .find() method.

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

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