拖放在 Nightwatch + Selenium 中不起作用

Question

使用 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 中完成。

是的， @box2 @box和@box2都在使用 xpath。 我已經使用這些進行了一段時間的其他測試。

Answer 1

在c.mouseButtonDown(0);之間暫停一下怎么樣c.mouseButtonDown(0); 和this.moveToElement('@box2', 0, 40);

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

希望這適用於您的測試用例。

Answer 3

我改編了@Hikyu 的方法，它對我有用：

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

Answer 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;
};