https://github.com/html-dnd/html-dnd

HTML Drag and Drop Simulator for E2E testing
https://github.com/html-dnd/html-dnd

html-drag nightwatch selenium-webdriver testing webdriver webdriverio

Last synced: 7 days ago
JSON representation

HTML Drag and Drop Simulator for E2E testing

• Host: GitHub
• URL: https://github.com/html-dnd/html-dnd
• Owner: html-dnd
• License: mit
• Created: 2015-10-03T16:31:14.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2019-10-29T20:20:11.000Z (about 5 years ago)
• Last Synced: 2024-09-20T09:17:22.738Z (about 2 months ago)
• Topics: html-drag, nightwatch, selenium-webdriver, testing, webdriver, webdriverio
• Language: TypeScript
• Size: 111 KB
• Stars: 55
• Watchers: 6
• Forks: 35
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
HTML Drag and Drop Simulator

============================

[![Circle CI](https://circleci.com/gh/Kuniwak/html-dnd.svg?style=shield)](https://circleci.com/gh/Kuniwak/html-dnd)

[![npm version](https://badge.fury.io/js/html-dnd.svg)](http://badge.fury.io/js/html-dnd)

[HTML Drag and Drop](https://html.spec.whatwg.org/multipage/interaction.html#dnd) Simulator for E2E testing.

Now, [WebDriver](http://www.w3.org/TR/webdriver/) cannot handle HTML Drag and Drop.

This module can simulate the HTML Drag and Drop by using the [Execute Script command](http://www.w3.org/TR/webdriver/#execute-script).

This module is like [rcorreia/drag_and_drop_helper.js](https://gist.github.com/rcorreia/2362544), but it does not require jQuery.

Install

-------

```shell

npm install --save-dev html-dnd

```

Compatibility

-------------

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

Usage

-----

### For selenium-webdriver

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

```

### For Nightwatch.js

```javascript

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

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

```

### With Typescript

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

```typescript

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

driver.executeScript(dragAndDrop, draggable, droppable, {onlyHover:true, hoverTime:1000});

```

See also

--------

- [Issue 3604: HTML5 Drag and Drop with Selenium Webdriver](https://code.google.com/p/selenium/issues/detail?id=3604)

License

-------

MIT (c) 2017 Kuniwak