使用 Leadfoot 测试拖放

Question

我们正在使用 Intern 和出色的新 Leadfoot 客户端库测试简单的拖放行为。我们的要求很简单:

1. 找到一个元素并移动到它
2. 按下鼠标按钮(拿起可拖动的项目)
3. 找到另一个元素并移动到它(拖动)
4. 释放鼠标按钮(放下可拖动的项目)
5. 检查发生了什么

我希望使用以下示例语法来执行此任务:

.findById("MY_DRAGGABLE")
  .moveMouseTo()
  .pressMouseButton()
.end()

.findById("MY_DROP_ZONE")
  .moveMouseTo()
  .releaseMouseButton()
.end()

这行不通。我已经知道 Selenium 中可能有一个特性，可能需要几个“移动”才能拾取可拖动的东西:

.findById("MY_DRAGGABLE")
  .moveMouseTo()
  .pressMouseButton()
  .moveMouseTo(null, 1, 1)
.end()

这仍然行不通，实际上为了使“拾取”工作，我还必须添加一个 click():

.findById("MY_DRAGGABLE")
  .moveMouseTo()
  .click()
  .pressMouseButton()
  .moveMouseTo(null, 1, 1)
.end()

这部分现在可以工作了，可拖动的东西被拾起，但是移动和释放不起作用。事实上，为了让他们做我想做的事，我必须使用一种相当奇怪的语法，它打破了 promise 链:

.findById("MY_DROP_ZONE")
  .then(function(element) {
    browser.moveMouseTo(element)
  })
  .releaseMouseButton()
.end()

所以最后我有:

.findById("MY_DRAGGABLE")
  .moveMouseTo()
  .click()
  .pressMouseButton()
  .moveMouseTo(null, 1, 1)
.end()

.findById("MY_DROP_ZONE")
  .then(function(element) {
    browser.moveMouseTo(element)
  })
  .releaseMouseButton()
.end()

我想知道的是，我在这里是否遗漏了有关对象定位的内容，或者我们使用的命令是否存在错误？

我们主要在各种平台上的 Firefox 上对此进行测试。

Answer 1

不幸的是，Selenium doesn't support HTML5 drag-and-drop , 因此虽然浏览器注册了鼠标按下和释放操作，但拖动操作却没有。

一种解决方案是使用 JavaScript 来模拟拖放过程。如何做到这一点的一个例子是 DragAndDrop helper在 Leadfoot 的 dnd 分支中。