HTML Drag and Drop Simulator

HTML Drag and Drop Simulator for E2E testing.

Now, WebDriver cannot handle HTML Drag and Drop. This module can simulate the HTML Drag and Drop by using the Execute Script command.

This module is like rcorreia/drag_and_drop_helper.js, but it does not require jQuery.

This fork of html-dnd simply adds a dragover event in front of the drop event to allow the angular-drag-and-drop-lists to work properly. This is due to angular-drag-and-drop-lists set index values via the drag over event, if the event is not run then correctly calculate the index of the drop point. Added optional arguments offsetX and offsetY as angular-drag-and-drop-lists tries to calculate which side of an element to do the drop based on the offsets. By using a small value for each, the drop goes ahead of the element being dropped upon, using large values it goes after the dropped upon element.

Install

npm install --save-dev html-dnd

Compatibility

Usage

For selenium-webdriver

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

var driver = new webdriver.Builder()
  .forBrowser('firefox')
  .build();

driver.get('http://example.com');

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

// drop before droppable
var offsetX = 1;
var offsetY = 1;

// drop after droppable
//var offsetX = 100;
//var offsetY = 1000;
//driver.executeScript(dragAndDrop, draggable, droppable);
driver.executeScript(dragAndDrop, draggable, droppable, offsetX, offsetY);

driver.quit();

For Nightwatch.js

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

module.exports = {
  'drag and drop': function(browser) {
    browser
      .url('http://example.com')
      .execute(dragAndDrop, ['#draggable', '#droppable'])
      .end();
  }
};

For WebdriverIO

var dragAndDrop = require('html-dnd').codeForSelectors;
var webdriverio = require('webdriverio');
var options = { desiredCapabilities: { browserName: 'chrome' } };
var client = webdriverio.remote(options);

client
  .init()
  .url('http://example.com')
  .execute(dragAndDrop, '#draggable', '#droppable');
  .end();

See also

• Issue 3604: HTML5 Drag and Drop with Selenium Webdriver

License

MIT (c) 2015 Kuniwak