用黄瓜测试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 \') 仍然没有骰子。没有错误,也没有任何动作。 这应该导致正确的路径...我只是希望自己能弄清楚!     
        您需要先触发鼠标悬停,然后单击。     

要回复问题请先登录注册