如何使用 Selenium 测试 JQuery UI 可排序小部件？答案

【问题标题】：How to test a JQuery UI Sortable widget using Selenium?如何使用 Selenium 测试 JQuery UI 可排序小部件？
【发布时间】：2010-11-16 14:45:41
【问题描述】：

我们有一个使用 JQuery UI Sortable 的可排序列表，我们正在尝试使用 Selenium 实现自动化。

看起来dragAndDrop 函数应该可以工作，但是当我们调用它时，UI 并没有改变。但是，如果我们用 firebug 查看 DOM，我们会看到列表元素的顺序发生了变化。好像只是UI不刷新。

知道如何让它工作吗？

【问题讨论】：

标签： jquery-ui drag-and-drop selenium jquery-ui-sortable ui-automation

【解决方案1】：

试试 dragAndDropToObject。我只是能够使用 Se-IDE 移动东西（尽管我怀疑 Se-RC 也可以）。

dragAndDropToObject | css=div[class=demo] > ul > li:nth(2) | css=div[class=demo] > ul > li:nth(5)

【讨论】：

不幸的是，这在我们的场景中不起作用。不过，我们可能遇到了边缘情况，因为页面非常复杂。

【解决方案2】：

我们找不到任何有效的解决方案，所以我们只是创建了帮助 javascript 函数，使用 jQuery 移动 html 元素。它适用于我们的案例，但感觉很脏！

【讨论】：

嗨@David。你究竟是如何让它发挥作用的？如果您查看http://stackoverflow.com/questions/7116149/javascript-testing-to-simulate-drag-for-jquery-ui-sortable-lists，您会看到我构建了一个简单的演示站点，该站点显示移动项目实际上不会触发 UI 可排序列表的正确事件。我们将不胜感激。
我们没有设法让它在 selenium 下工作。我们所做的是，为了我们的自动化测试，我们添加了一个 javascript 方法 moveItem(from, to)，它将项目移动到正确的位置（没有拖放，只是 DOM 操作）。测试使用此方法而不是尝试拖放。因此，我们不是在测试拖放功能，而是在测试应用正确响应项目的新位置。
是的，我在想我需要做同样的事情。我会写一些希望可重用的代码，并在完成后与大家分享。

【解决方案3】：

我已经开发了一个 JQuery 插件来解决这个问题，请查看 jquery.simulate.drag-sortable.js，其中包括一个插件以及一套测试。

希望你觉得这很有用！欢迎反馈。

马特

【讨论】：

【解决方案4】：

这是我发现的与 Selenium 和 Capybara 配合得很好的方法

# Move a row at index start_index to end_index
def move(start_index, end_index)
  row = sortable_row(start_index)

  # We are not using Capybara drag_to here as it won't work properly in dragging first and last elements,
  # and also is a bit unpredictable whether it will drop before or after an element
  move_amount = ((end_index - start_index)*row_height).to_i
  # Move a little more than the explicit amount in each direction to be certain 
  # that we land in the correct spot
  move_amount_sign = (move_amount >= 0) ? 1 : -1
  move_amount = move_amount + move_amount_sign*(row_height * 0.25).to_i
  @session.driver.browser.action.drag_and_drop_by(row.native, 0, move_amount).perform
end

# Get the height of a row for sorting
def row_height(refresh=false)
  @row_height = nil unless @row_height || refresh
  unless @row_height
    @row_height = @session.evaluate_script("$('.my-sortable-row').height()")
  end
end

【讨论】：

【解决方案5】：

在 2017 年的 rails 4+ angular 1x，使用 capybara selenium 测试和 2 个不同的驱动程序：poltergeist 和 chrome，我能够让 capybara 内置 drag_to 开箱即用。我不会说它在哪里拖拽东西是 100% 可靠的，但是拖拽的东西一直拖着，所以这是一个惊喜。我还得到了 Julie's answer 的修改版本，可以在 chrome 中工作，但不是 poltergeist（没有 driver.browser.action... 不确定 poltergeist 版本是什么，如果存在的话）。

所以无论如何都是这样的：

element = page.find_all('.draggable_thing')[0]
target = page.find_all('.droppable_thing')[3]
element.drag_to(target)

鉴于上述 cmets，我很惊讶它如此轻松地工作，但我想情况有所改善。

【讨论】：