dragAndDrop in Firefox & Chrome does not work

[rbatllet]

Bug report

• Node Version: 5.8.0
• Protractor Version: 3.0.0
• Browser(s): Firefox 45.0 & Chrome 49.0.2623.87 (64-bit)
• Operating System and Version MacOS 10.11.3 El Capitan
• Your protractor configuration file

'use strict';

(function() {
  exports.config = {
    framework: 'jasmine',
    capabilities: {
      browserName: 'firefox',
    },
    specs: ['e2e/*.spec.js'],
    baseUrl: 'http://localhost:8000/',
    directConnect: true,
    jasmineNodeOpts: {
      showColors: true,
      defaultTimeoutInterval: 30000
    }
  };
})();

• A relevant example test

'use strict';

describe('Drag materials', function() {
  beforeEach(function() {
    browser.driver.get('http://html5demos.com/drag');
  });
  describe('draggable map', function() {
    it('Drag Test', () => {
      var source = browser.driver.findElement(by.id('one'));
      var destination = browser.driver.findElement(by.id('bin'));
      browser.driver.actions().dragAndDrop(source, destination).perform();
      browser.driver.sleep(5000);
    });
  });
});

• Output from running the test:
  Nothing is dragged
• The URL you are running your tests against (if relevant)
  The external url is http://html5demos.com/drag (non angular)

Note: browser.driver.actions().mouseDown(source).mouseMove(destination).mouseUp(destination).perform(); does not work.

[rbatllet]

Note: In Ubuntu 15.10, with the same node, protractor, and firefox version, the element is dragged and moved (but not dropped) to the current cursor position but it's not moved or dropped to the destination.

[heathkit]

Unfortunately, HTML5 drag and drop is a persistent issue for Webdriver. There are workarounds you can try in #583 and in the WebDriver issue SeleniumHQ/selenium-google-code-issue-archive#3604.