用黄瓜测试JQuery自动完成ui

如何解决用黄瓜测试JQuery自动完成ui

| 我得到了这个黄瓜sceanario：

When I fill in \"End User\" with \"john\"
Then wait
Then wait
When I click \"John Doe\"
Then show me the page

步骤定义：

Then /^wait$/ do
  sleep 2
end

When /^(?:|I )click \"([^\"]*)\"$/ do |selector|
  find(\":contains(\'#{selector}\')\").click
end

它通过了，但是没有选择用户。\“向用户显示页面\”中的“最终用户\”等于\“ john \”。 我什至无法使其在javascript控制台中正常工作。以下代码不选择任何内容。

$(\":contains(\'John Doe\')\").last().trigger(\'click\')
# => [<a class=​\"ui-corner-all\" tabindex=​\"-1\"...

如何编写自动完成选择的脚本？是纯JavaScript还是黄瓜。     

解决方法

        快去

When /^I type in \"([^\\\"]*)\" into autocomplete list \"([^\\\"]*)\" and I choose \"([^\\\"]*)\"$/ do |typed,input_name,should_select|
   page.driver.browser.execute_script %Q{ $(\'input[data-autocomplete]\').trigger(\"focus\") }
   fill_in(\"#{input_name}\",:with => typed)
   page.driver.browser.execute_script %Q{ $(\'input[data-autocomplete]\').trigger(\"keydown\") }
   sleep 1
   page.driver.browser.execute_script %Q{ $(\'.ui-menu-item a:contains(\"#{should_select}\")\').trigger(\"mouseenter\").trigger(\"click\"); }
end

像这样使用

And I type in \"Foo\" into autocomplete list \"input_id\" and I choose \"Foobar\"

    ,        我自己也遇到了同样的痛苦。在花了几个小时之后，我有了一个很好的助手，可以同时使用硒和polstergeist，而且没有使用

sleep()

。以下代码已在Capybara 2.1.0中进行了测试：

  def fill_autocomplete(field,options = {})
    fill_in field,with: options[:with]

    page.execute_script %Q{ $(\'##{field}\').trigger(\'focus\') }
    page.execute_script %Q{ $(\'##{field}\').trigger(\'keydown\') }
    selector = %Q{ul.ui-autocomplete li.ui-menu-item a:contains(\"#{options[:select]}\")}

    page.should have_selector(\'ul.ui-autocomplete li.ui-menu-item a\')
    page.execute_script %Q{ $(\'#{selector}\').trigger(\'mouseenter\').click() }
  end

基本上，我告诉Capybara填写输入字段，然后使用JS触发

keydown

事件来激活自动完成功能。但是，我会使用

page.should have_selector(\'ul.ui-autocomplete li.ui-menu-item a\')

来代替

sleep()

，它会等到下拉列表出现。然后，我使用JS触发

mouseenter

事件，然后单击。我希望有比使用JS eval更好的方法，但这是我能想到的最可靠的解决方案。     ,        尽管这不是解决方案，但可能会导致您无法解决该问题： click事件绑定到UL，而不是a或li： $（\'ul.ui-autocomplete \'）。click（）; 但是，这对我不起作用。我想象一下click事件依赖于（a）和（li）的某种状态。它为我模拟的当前悬停的项目添加了一些类和一个ID ... $（\'a.ui-corner-all \'）。attr（\'id \'，\'ui-active-menuitem \'） $（\'a.ui-corner-all \'）。addClass（\'ui-active-menuitem \'） 仍然没有骰子。没有错误，也没有任何动作。 这应该导致正确的路径...我只是希望自己能弄清楚！     ,        您需要先触发鼠标悬停，然后单击。