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-dnd

Compatibility

Usage

For selenium-webdriver

vardragAndDrop=require('html-dnd').code;varwebdriver=require('selenium-webdriver');varBy=webdriver.By;vardriver=newwebdriver.Builder().forBrowser('firefox').build();driver.get('http://example.com');vardraggable=driver.findElement(By.id('draggable'));vardroppable=driver.findElement(By.id('droppable'));driver.executeScript(dragAndDrop,draggable,droppable);driver.quit();

For Nightwatch.js

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

For WebdriverIO

vardragAndDrop=require('html-dnd').codeForSelectors;varwebdriverio=require('webdriverio');varoptions={desiredCapabilities: {browserName: 'chrome'}};varclient=webdriverio.remote(options);client.init().url('http://example.com').execute(dragAndDrop,'#draggable','#droppable');.end();

With Typescript

import{codeasdragAndDrop}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{codeasdragAndDrop}from'html-dnd';driver.executeScript(dragAndDrop,draggable,droppable,{onlyHover:true,hoverTime:1000});

See also

• Issue 3604: HTML5 Drag and Drop with Selenium Webdriver

License

MIT (c) 2017 Kuniwak