html-dnd

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.

Install
-------
``shell
npm install --save-dev html-dnd
`


Compatibility
-------------
![Sauce Test Status](https://saucelabs.com/u/html-dnd)


Usage
-----


$3

`javascript
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'));

driver.executeScript(dragAndDrop, draggable, droppable);

driver.quit();
`

$3

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

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

$3

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

$3

`typescript
import {code as dragAndDrop} from 'html-dnd';

driver.executeScript(dragAndDrop, draggable, droppable);
``

See also
--------

- Issue 3604: HTML5 Drag and Drop with Selenium Webdriver

License
-------

MIT (c) 2017 Kuniwak