Question

我有这个黄瓜情景：

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还是黄瓜。

Answer 1

放手一搏

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"

Answer 2

我自己也遇到了同样的痛点。在花了几个小时后，我有一个好帮手，既可以使用selenium也可以使用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事件来激活自动完成。但是，我利用等待下拉列表出现的sleep()而不是page.should have_selector('ul.ui-autocomplete li.ui-menu-item a')。然后我用JS来触发mouseenter事件然后点击。我希望有更好的方法，而不是使用JS eval，但这是我可以提出的最可靠的解决方案。

Answer 3

虽然这不是解决方案，但这可能会让您走上解决方案的道路：

click事件绑定到UL，没有a或li：

$（ 'ul.ui-自动完成'）点击（）;

然而，这对我不起作用。我认为click事件依赖于（a）s和（li）s的某种状态。它为我模拟的当前悬停项目添加了一些类和一个ID ...

$（ 'a.ui角-所有'）。ATTR（ 'ID'， 'UI-有源菜单项'） $（ 'a.ui角-所有'）。addClass（ 'UI活性-菜单项'）

仍然没有骰子。没有错误，但也没有任何行动。

这应该导致正确的道路......我只是希望我能把它想出来！

Answer 4

您需要首先触发鼠标悬停，然后单击。

用黄瓜测试JQuery自动完成ui

4 个答案: