xl-html-dnd

HTML Drag and Drop Simulator for E2E testing

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
xl-html-dnd
1.2.46 years ago7 years agoMinified + gzip package size for xl-html-dnd in KB

Readme

HTML Drag and Drop Simulator
Circle CI npm version
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/draganddrophelper.js, but it does not require jQuery.

Install

npm install --save-dev html-dnd

Compatibility

Sauce Test Status

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);

See also

License

MIT (c) 2017 Kuniwak