jquery-ui - 如何使用 Selenium 测试 JQuery UI 可排序小部件？

Question

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

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

知道如何让它工作吗？

Answer 1

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

拖放对象 | css=div[class=demo] > ul > li:nth(2) | css=div[class=demo] > ul > li:nth(5)

Answer 2

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

Answer 3

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

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

马特

Answer 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

Answer 5

在 2017 年的轨道 4+ 角度 1x 中，使用 capybara selenium 测试和 2 个不同的驱动程序：poltergeist 和 chrome，我能够让内置的 capybaradrag_to开箱即用。我不会说它在哪里拖拽东西是 100% 可靠的，但是拖拽的东西一直拖着，所以这是一个惊喜。我还得到了 Julie 的答案的修改版本，可以在 chrome 中工作，但不是 poltergeist（不driver.browser.action......不确定 poltergeist 版本是否存在）。

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

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

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