Drag & Drop with Protractor by Repeater

Drag & Drop with Protractor by Repeater

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:

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

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

Answer by Mohsen for Drag & Drop with Protractor by Repeater

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.

Answer by willko747 for Drag & Drop with Protractor by Repeater

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 by Brady Isom for Drag & Drop with Protractor by Repeater

I had this same issue. The solution for me was to follow the advice in the Selenium issue here: https://code.google.com/p/selenium/issues/detail?id=3604#c20

Starting with the example from @willko747, here was my solution:

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

I think this also solves this issue

Answer by Rahul Vig for Drag & Drop with Protractor by Repeater

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

Answer by Praveen for Drag & Drop with Protractor by Repeater

None of the solutions mentioned above worked for me. I could see the element (to be dragged) getting selected and the mouse cursor changing to a 4-way scroll arrow. However, the drag was not happening.

What worked for me is the solution I found in GitHub: https://gist.github.com/druska/624501b7209a74040175
Download the file: "native_js_drag_and_drop_helper.js"

I am sharing the code for "native_js_drag_and_drop_helper.js".

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

Implementation of this Drag-and-Drop function:

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

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72