Drag & Drop with Protractor by Repeater

Question

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?

Answer 1

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

Answer 2

Use .dragAndDrop method

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

I'm not sure how you're going to calculate x and y. But this is how you usually do it.

As a side note, use $ instead of findElement. It's being deprecated.