Testing 如何使用Cucumber测试可排序的JQuery UI

我正在尝试编写一个cucumber/capybara测试来重新排序一些项目，然后将它们保存回去。关于如何最好地做到这一点，您有什么想法吗？

我正在使用这样的web步骤，效果很好：

When /^I drag "([^"]*)" on top$/ do |name|
  item = Item.find_by_name(name)
  sleep 0.2
  src  = find("#item_id_#{item.id}")
  dest = find("div.title")
  src.drag_to(dest)
end

---

“拖到”方法对我不起作用。但是，通过使用jquery.simulate.js在我的capybara selenium测试中包含以下内容，我能够将列表中的第一个元素拖到最后一个位置：

page.execute_script %Q{
  $.getScript("/javascripts/jquery.simulate.js", function(){ 
    distance_between_elements = $('.task:nth-child(2)').offset().top - $('.task:nth-child(1)').offset().top;
    height_of_elements = $('.task:nth-child(1)').height();
    dy = (distance_between_elements * ( $('.task').size() - 1 )) + height_of_elements/2;

    first = $('.task:first');
    first.simulate('drag', {dx:0, dy:dy});
  });
}                 

---

我已经开发了一个JQuery插件来解决这个问题，其中包括一个插件以及一套测试和示例

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

马特

对我来说，

#拖拽

确实有效，但它的功能似乎有限

为了向下移动UI可排序表行，我必须创建一个包含三行的表，然后运行以下步骤：

# Super-primitive step
When /^I drag the first table row down$/ do
  element = find('tbody tr:nth-child(1)')
  # drag_to needs to drag the element beyond the actual target to really perform
  # the reordering
  target = find('tbody tr:nth-child(3)')

  element.drag_to target
end

这会将第一行与第二行交换。我的解释是水豚拖得不够远，所以我给了它一个超出我实际目标的目标

---

注意：我已使用

容差配置UI可排序：“指针”

。

我遵循@codener的解决方案，它可以工作！我在代码中更改的唯一一件事是使用

公差配置UI可排序：“指针”

@codener的答案中描述的限制也没有消失。（我使用的是capybara 2.18.0。）它不需要第三行来交换第一行和第二行

When /^I drag the first table row down$/ do
  element = find('tbody tr:nth-child(1)')
  target = find('tbody tr:nth-child(2)')
  element.drag_to target
end

---

我无法使这个解决方案起作用。还有其他人在这方面取得了成功吗？使用rspec+capybara（不是cucumber）&我也不能让它工作。拖动元素可以工作（在方法中返回true），但屏幕顺序不会改变（根据save_和open_屏幕截图）或直接检查文本。Hi@Francois。我已经尝试了您的代码，但是simulate.js库不能处理可排序列表。我创建了一个示例，其中嵌入了simulate插件，但对其进行了修改，从而减慢了步骤。正如您将看到的，simulate插件正在拖动，但sortable没有正确响应。转至查看Dragable工作而sortable失败的示例。我也在尝试为Cucumber做类似的事情，所以解决这个问题的方法会很好。你是怎么做到的？我已经在项目的自述中添加了一个示例步骤。