Question

我在Mac上使用黄瓜/水豚/硒/火狐。除了d＆amp; d之外，所有工作都很好。可以通过drag_node.drag_to(drop_node)进行拖放操作。当被调用时，它不会引发任何错误，但实际的拖放从未发生过。

现在，我发现this sample app（由显然有类似问题的家伙写的）证明了问题，而不是复制粘贴的碎片。

然而，谷歌并不知道drag_to()被打破了。据我所见。这给了我一个希望，就是我错过了一些东西而不是一个bug。那是什么？我错过了什么？一个错误？

Answer 1

对我来说，#drag_to确实有效，但是它的力量似乎有限。

为了向下移动UI可排序表格行，我必须创建一个包含三行的表，然后运行此代码（在Cucumber步骤中）：

element = find('tbody tr:nth-child(1)')
target = find('tbody tr:nth-child(3)')

element.drag_to target

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

注意：我已使用tolerance: 'pointer＆＃39; 配置了可排序的用户界面。

Answer 2

我遇到了同样的问题并直接转到selenium-webdriver解决了这个问题。

我使用的是selenium-webdriver 2.20.0和Capybara 1.1.2

这适用于此HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Cabybara Drag And Drop</title>
    </style>
    <style type="text/css" media="screen">
      #list_1 { background:#2C4999; }
      #list_2 { background:#99752A; }
      .list { padding:10px; width:200px; }
      .item { background:#FFF; margin:10px; }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>

    <script type="text/javascript">
      $().ready(function(){
        $( "#list_1" ).sortable({ connectWith:"#list_2" });
        $( "#list_2" ).sortable({ connectWith:"#list_1" });
      });
    </script>
  </head>
  <body>
    <ol id='list_1' class='list'>
      <li id='item_1' class='item'>Item 1</li>
      <li id='item_2' class='item'>Item 2</li>
      <li id='item_3' class='item'>Item 3</li>
      <li id='item_4' class='item'>Item 4</li>
      <li id='item_5' class='item'>Item 5</li>
    </ol>
    <ol id='list_2' class='list'>
      <li id='item_6' class='item'>Item 6</li>
      <li id='item_7' class='item'>Item 7</li>
      <li id='item_8' class='item'>Item 8</li>
      <li id='item_9' class='item'>Item 9</li>
      <li id='item_10' class='item'>Item 10</li>
    </ol>

  </body>
</html>

现在是Ruby代码。从capybara调用page.driver.browser

获取selenium-webdriver

require 'test_helper'

class DragDropTest < ActionDispatch::IntegrationTest
  setup do
    Capybara.current_driver = Capybara.javascript_driver # :selenium by default
  end

  def test_drag_item_1_to_list_2
    visit '/drag_drop'
    element = page.find(:id, 'item_1')
    target  = page.find(:id, 'list_2')

    selenium_webdriver = page.driver.browser
    selenium_webdriver.mouse.down(element.native)
    selenium_webdriver.mouse.move_to(target.native, 0, 10)
    selenium_webdriver.mouse.up
    sleep 2
  end
end

Answer 3

selenium-webdriver有可排序列表的问题。这篇文章介绍了解决方法：http://www.dixis.com/?p=626

Answer 4

#drag_to不适用于可排序列表，可能是因为您没有像拖动设置的距离和方向那样拖动“到”元素。 Selenium的#drag_by是您正在寻找的，但Capybara目前不支持。

另见：

https://github.com/jnicklas/capybara/issues/222

https://github.com/jnicklas/capybara/issues/119

Capybara'拖累;滴'不起作用

4 个答案: