@acring/html-dnd 中文文档教程

Question

HTML Drag and Drop Simulator

HTML 拖放 用于端到端测试的模拟器。

现在，WebDriver 无法处理 HTML 拖放。 该模块可以使用执行脚本命令模拟HTML拖放。

此模块类似于 rcorreia/drag和drop_helper.js，但它不需要 jQuery。

Install

npm install --save-dev html-dnd

Compatibility

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

在某些情况下，拖动操作不会以放置结束，而是在悬停在触发器上方时显示元素。 如果你只想做一个悬停，你可以通过

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

License

MIT (c) 2017 Kuniwak