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
npm install --save-dev html-dndCompatibility
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'));
driver.executeScript(dragAndDrop, draggable, droppable);
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();With Typescript
import {code as dragAndDrop} from 'html-dnd';
driver.executeScript(dragAndDrop, draggable, droppable);Only Hover
In some scenarios a drag operation is not beeing ended with a drop, but rather reveals an element upon hovering above a trigger. If you only want to do a hover you can do so via
import {code as dragAndDrop} from 'html-dnd';
driver.executeScript(dragAndDrop, draggable, droppable, {onlyHover:true, hoverTime:1000});See also
License
MIT (c) 2017 Kuniwak
