拖放在 Nightwatch + Selenium 中不起作用答案

【问题标题】：Drag & Dropping doesn't work in Nightwatch + Selenium拖放在 Nightwatch + Selenium 中不起作用
【发布时间】：2017-03-31 19:19:23
【问题描述】：

使用 nightwatch 和 selenium，在系统测试期间，我尝试拖放，这是通过 Knockout-draggable 完成的。手动使用时它可以 100% 工作。这是系统测试中的代码，它应该拖放一个可拖动的框：

this.moveToElement('@box', 0, 0);
c.mouseButtonDown(0);
this.moveToElement('@box2', 0, 40);
c.mouseButtonUp(0);

this 是页面（xpath 元素所在的页面），c 是客户端。

但这似乎甚至无法将第二个框（大约 40 像素高）下方的框移动。是的，我尝试了不同的数字，它甚至没有将盒子拖到任何地方。在 Firefox 中完成。

是的，@box 和 @box2 都在工作 xpath。我已经使用它们进行了一段时间的其他测试。

【问题讨论】：

我试图使用这个库：github.com/Kuniwak/html-dnd 但它似乎不适合我，你能在你的项目中试试这个

标签： javascript selenium knockout.js drag-and-drop nightwatch.js

【解决方案1】：

在c.mouseButtonDown(0); 和 this.moveToElement('@box2', 0, 40);

【讨论】：

【解决方案2】：

你们必须尝试一下，它在 Chrome、Firefox 和 IE 中运行良好。但这只有在要移动的元素和要移动到的元素都支持 HTML5 拖放功能时才有效。

你只需要使用 npm 安装“html-dnd”，还有这个链接 -
https://www.npmjs.com/package/html-dnd

安装后你只需要执行这个命令：
browser.execute(dragAndDrop, ['#draggable', '#droppable']);

例如：
browser.execute(dragAndDrop,['#elemendId1', '#elemendId2']).pause(2000);

希望这将适用于您的测试用例。

【讨论】：

【解决方案3】：

我改编了@Hikaryu 的方法，它对我有用：

exports.dragAndDrop = function (browser, LocatorFrom, LocatorTo) {
  browser
    .moveToElement(LocatorFrom,  10,  10)
    .mouseButtonDown(0)
    .pause(2000)
    .moveToElement(LocatorTo,  10,  10)
    .pause(2000)
    .mouseButtonUp(0);
  return browser;
};

【讨论】：

【解决方案4】：

我为这个问题制作了一个 customCommand。它的工作没有问题

module.exports.command = function (LocatorFrom, LocatorTo, callback) {

  var self = this;

  this
    .getLocation(LocatorTo, function (result) {
      let xto = result.value.x;
      let yto = result.value.y;

      this.moveToElement(LocatorFrom,  10,  10)
        .mouseButtonDown(0)
        .pause(2000)
        .moveToElement(LocatorTo,  xto,  yto)
        .pause(2000)
        .mouseButtonUp(0);
      return this;
    });



  return this;
};

【讨论】：