Testing JQuery autocomplete ui with cucumber

Question

I got this cucumber sceanario:

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

<

Answer 1

I myself bumped into the same pain spot too. After spending few hours on this, I have one good helper that works both with selenium and polstergeist plus no usage of sleep(). The following code has been tested with 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

Basically, I tell Capybara to fill in the input field then use JS to trigger the keydown event to activate autocomplete. However instead of sleep(), I take advantage of page.should have_selector('ul.ui-autocomplete li.ui-menu-item a') that wait till the dropdown list appeared. Then I use JS to trigger the mouseenter event then click. I wish that there are better way than doing things with JS eval, but this is the most reliable solution that I could come up.