1

I am executing my protractor code on MAC OS system and using Chrome. Everything works but not drag and drop event.

The code is working fine if I put my actual mouse position on the target of drop. But if the actual mouse position is not at the target location, its not performing the action. The code I am using is as:

browser.actions().dragAndDrop(source,target).perform();

I have also tried this :

browser.actions().mouseDown(source).mouseMove(target).mouseUp().perform();
demouser123
  • 4,108
  • 9
  • 50
  • 82
Ram
  • 71
  • 2
  • You've specifically tagged `macos`. Can you verify if this solution is working on other os? – demouser123 Jun 23 '18 at 12:48
  • 2
    Possible duplicate of [Protractor drag-and-drop: Angular vs. Angular with HTML5](https://stackoverflow.com/questions/38916746/protractor-drag-and-drop-angular-vs-angular-with-html5) – demouser123 Jun 23 '18 at 13:15

3 Answers3

2

Use html-dnd NPM module.

Link:https://www.npmjs.com/package/html-dnd

code snippet:

var dragAndDrop = require('html-dnd').code;

var draggable = driver.findElement(By.id('draggable'));

var droppable = driver.findElement(By.id('droppable'));

driver.executeScript(dragAndDrop, draggable, droppable);
Dharman
  • 30,962
  • 25
  • 85
  • 135
Vaibhav Jagdale
  • 229
  • 2
  • 11
1

for this : 

browser.actions().dragAndDrop(source,target).perform();

try this : 

browser.actions().mouseMove(source).mouseDown().mouseMove(target).mouseUp().perform();

Note that dragAndDrop is nothing but mouseMove + mouseDown + mouseMove + mouseUp

cruisepandey
  • 28,520
  • 6
  • 20
  • 38
  • Thanks, already tried, but not works in my case. i think this is specific to mac os. – Ram Jun 23 '18 at 10:35
  • You have to let your script knows that it should focus on element, for that I have added mouseMove(source) before mouseDown() method. – cruisepandey Jun 23 '18 at 10:37
  • The script works only in the case when my actual mouse pointer present on the target division while running the test. but if in case my actual mouse pointer present on any of the other division that this does not work. I know this is strange but this is currently happening. I have tried 100+ success and fail cased. – Ram Jun 23 '18 at 10:44
  • Yes this issue is quiet generic, your driver should have focus on the element then perform drag and drop action. As you have mentioned when you put your mouse cursor manually then it works , the same thing you have to simulate using your script. – cruisepandey Jun 23 '18 at 10:47
  • How to exactly focus on the element. I hope you understand the same script is working in the case when my mouse pointer is hovering on the target script. – Ram Jun 23 '18 at 10:49
1

Chances are you're in a long line of people who have problems with the drag and drop functionality implemented with html5. This has been a problem area to work around using Selenium webdriver.

Please see that the issue might be due to an age old bug that was filed for ChromeDriver.

The bug has a lot of discussion that may be helpful in understanding the real issue and there are also a lot of solutions mentioned in the comments below - however there has not been a fool-proof or 100% working solution to this problem.

This bug has been mentioned in Protractor github issues a lot of times like here, here, here,and here and in Selenium GitHub in the archived issues here.

One of the solutions you can try is this helper method that was created here. However this is not a guaranteed solution, but I would suggest you to give it a try. The original issue mentioned for Protractor here also has many other solutions mentioned which you can try. You can also try this helper method.

Also, please see that the same question has been posted multiple times here, here, here, here.

halfer
  • 19,824
  • 17
  • 99
  • 186
demouser123
  • 4,108
  • 9
  • 50
  • 82