Autocomplete inputs

[dougalcorn]

When using selenium (or even culerity) I can simply fill_in fields with strings and the jquery ui autocomplete fields will trigger the proper events to make the right ajax calls. I can then properly find the right links and click them to select which autocomplete result I want.

Unfortunately, all these tests fail with capybara-webkit. I tried manually triggering the right events, but I get Capybara::NotsupportedByDriverError when doing find("#id").trigger("focus") and also page.evaluate_javascript("$('#id').focus();").

BTW, I'm running with JRuby 1.6.1

[roccoblues]

I have the same problem with capybara-webkit. None of my autocomplete events is triggered. (Ruby 1.9.2)

[pcreux]

Same issue on ruby 1.8.7 (2010-04-19 patchlevel 253) [i686-darwin10.5.0], MBARI 0x6770, Ruby Enterprise Edition 2010.02

[jumski]

Confirmed on ruby 1.9.2p180 (2011-02-18 revision 30909) [x86_64-linux]

[lazylester]

confirmed here too. It appears the ajax request is not being triggered (i.e. it's not a timeout related to ajax response, and it's not a failure to invoke the ajax callback).

[ahawkins]

I haI have the same problem. I use only javascript because that works in all drivers. fill_in does not work in either
capybara-webkit or selenium.

Here's my code currently

When /^I type "([^"]*)" into the to box$/ do |text|
  assert_current_form

  page.execute_script %Q{$("#{@current_form}").find('input[id$="to"]').val("#{text}")}
  page.execute_script %Q{$("#{@current_form}").find('input[id$="to"]').autocomplete('search')}

  # doesn't work in either capybara-webkit or selenium
  # within @current_form do
  #   fill_in 'To', :with => text
  # end

  @current_autocomplete_input = %Q{#{@current_form} input[id$="to"]}
end

Then /^I choose "([^"]*)"'s email address from the autocomplete$/ do |name|
  text = find_by_name!(name).to_email_address

  js = %Q{$('#{@current_autocomplete_input}').autocomplete('widget').find('li a:contains("#{text}")').size() != 0}
  result = page.evaluate_script(js)
  result.should be_true, %Q{Could not find "#{text}" inside the autocomplete.}

  js = %Q{$('#{@current_autocomplete_input}').autocomplete('widget').find('li a:contains("#{text}")').trigger('mouseenter').click()}
  page.execute_script(js);

  js = %Q{$('#{@current_autocomplete_input}').val()}
  value = page.evaluate_script js
  value.should include(text)
end

[ogredude]

Same issue. Ruby 1.8.7, Rails 3.0.5, Capybara 1.0.0, Capybara-webkit 1.0.0.beta4.
Also tried with Capybara 0.4.1.2 and capybara-webkit 0.5.0

Watching my test.log, the autocomplete search action is never getting triggered.

[snelson]

I hit the same issue and dug around a bit ...

Looking at the code, I'm pretty sure its because a 'blur' event is being fired immediately after the field is set by a fill_in. If you do the same thing manually in the browser the drop down won't show either. That is, fill in an autocomplete field and quickly tab out of it before it triggers the keyup timeout.

See:

capybara-webkit/src/capybara.js

Line 116 in 81ad8fd

this.trigger(index, "blur");

[snelson]

Similar to @Adman65's solution, these work for me on jquery-ui 1.8.4:

def fill_in_autocomplete(selector, value)
  page.execute_script %Q{$('#{selector}').val('#{value}').keydown()}
end

def choose_autocomplete(text)
  find('ul.ui-autocomplete').should have_content(text)
  page.execute_script("$('.ui-menu-item:contains(\"#{text}\")').find('a').trigger('mouseenter').click()")
end

Notice all it takes to trigger the drop menu is setting the value and triggering a keydown event after the value is set. If I put a blur in there, it doesn't work.

[roccoblues]

Also got it working with your functions. Thanks guys!

[lazylester]

@snelson where did you put the autocomplete methods that you describe here?

[snelson]

@lazylester, I have them in a module that get's included into rspec for type => :acceptance. It would look something like this inside of the spec_helper's configure block:

# spec/spec_helper.rb

Dir[Rails.root.join("spec/support/**/*.rb")].each {|f| require f}

RSpec.configure do |config|
   # [other config stuff ]
  config.include AcceptanceHelpers,   :type => :acceptance # change type to whatever your using capybara in (might be request?)
end

# spec/support/acceptance_helpers.rb
module AcceptanceHelpers
  def fill_in_autocomplete(selector, value)
    page.execute_script %Q{$('#{selector}').val('#{value}').keydown()}
  end

  def choose_autocomplete(text)
    find('ul.ui-autocomplete').should have_content(text)
    page.execute_script("$('.ui-menu-item:contains(\"#{text}\")').find('a').trigger('mouseenter').click()")
  end
end

If you're on Test::Unit, include the above module/mixin into your test class.

[snelson]

@ogredude, I think that means you're getting a Javascript error. Not sure how you can get Capy-Webkit to show you the js errors, or if that's possible. So, what I would do is is try running the JS manually in the browser and see if you get any errors. Throw it in a document.ready at the bottom of the page or something, after you setup your autocomplete fields.

$(document).ready(function() {
  $('#my_autocomplete').val('some value').keydown();
});

Something like that should show you the autocomplete when you load the page. If you get errors there you'll be able to debug that easier. As I said I'm running an older version of Jquery UI (1.8.4) so its possible that you may need to trigger it differently in later versions ...

[ogredude]

@snelson, it turns out that I was getting this error because I've got a nut loose on my keyboard. Problem solved with a swift beating.

[jferris]

We've improved the way capybara-webkit triggers key events. Can you guys try again with the latest version?

[roccoblues]

I tried to switch from my custom functions:

  def fill_in_autocomplete(selector, value)
    page.execute_script %Q{$('#{selector}').val('#{value}').keydown()}
  end

  def choose_autocomplete(text)
    find('ul.ui-autocomplete').has_content?(text)
    page.execute_script("$('.ui-menu-item:contains(\"#{text}\")').find('a').trigger('mouseenter').click()")
  end

to simple fill_in() and click_on()

    fill_in 'posting_zip', :with => 20357
    click_on '20357 Hamburg - Altona-Altstadt'
    # fill_in_autocomplete('#posting_zip', 20357)
    # choose_autocomplete('20357 Hamburg - Altona-Altstadt')

and it didn't work. This was with capybara-webkit 0.11.0 and capybara 1.1.2

[mati0090]

Methods above didn't works for me. Autocomplete field needs to be focused on self:

def fill_in_autocomplete(selector, value)
  page.execute_script "$('input##{selector}').focus().val('#{value}').keydown()"
end

and in test:

fill_in_autocomplete('search', 'ma')
assert find('li.ui-menu-item').has_content?("mati0090")

That's it. Works under webkit.

[linuxonrails]

I have updated capybara-webkit to github's master but i have the same problem.

bundle list capybara
vendor/bundle/ruby/1.9.1/gems/capybara-1.1.2

bundle list capybara-webkit
vendor/bundle/ruby/1.9.1/bundler/gems/capybara-webkit-6d224d0791f0

[linuxonrails]

With datepicker (jQueryUI) you should use trigger('focus') too

[halogenandtoast]

@jferris I ran into an issue tonight that might be related. Part of the problem is that fill_in calls set and for a text field we blur once it has finished filling in the field (https://github.com/thoughtbot/capybara-webkit/blob/master/src/capybara.js#L236). This does not seem to be the same behavior as selenium.

[jferris]

@halogenandtoast nice catch. I put together #357 to try and address that. If you have a sec, can you take a look at that? It means adding a development dependency on Selenium (not for users of capybara-webkit, just for developers), but it means that we have a way to test that we generate the same events as Selenium.

If anybody in this thread wants to try out the jf-selenium-compat branch as a fix to this issue, that would be useful.

[mcbsys]

I'm using Rails 3.2.8 with rails3-jquery-autocomplete1.0.9, rspec-rails 2.11.4, capybara 1.1.3, and capybara-webkit 0.12.1.

In a browser, if I manually paste a search term into an autocomplete field using the mouse (not Ctrl-V), nothing happens--no picklist is displayed. If I click in the field and press the Shift key, the picklist appears. So yes, the keydown and apparently focus are required to get the autocomplete to display a picklist.

The Steak helper included with rails3-jquery-autocomplete uses the standard fill_in, then uses page.execute_script to trigger focus and keydown, then to select an item.

@snelson 's approach above, with the addition of @mati0090 's focus(), is similar but fills in the value explicitly before the keydown. If I understand correctly, this is required to avoid a blur() from clearing the field?

Both approaches work for me with Selenium. Unfortunately, neither works with webkit. The behavior using the approach from this thread with webkit is strange:

• the hidden id field associated with the autocomplete is filled in correctly, so it would seem that it selected the value properly.
• the autocomplete field itself is empty (value="")
• another, standard input field that I fill in with fill_in is also empty (no value attribute).

[artm]

Hi

I was sent here by CodeTriage.

I've made a minimal test case using sinatra and jquery ui autocomplete plugin. I just test if .ui-autocomplete becomes visible after filling in some text into the input field. The test passes in both selenium and capybara-webkit.

It looks like the issue is resolved, or I miss some details.

[jferris]

Can somebody in this thread confirm whether or not the latest capybara-webkit is working for you with your autocomplete fields?

[KernelFolla]

Today I had the same problem and I solved it thanks to this thread.
Actually my problem is related to the use of phantomjs 1.9.7 as a server but I suppose it is related. Neither events "focus" nor "keydown" occur:(

[icem]

I think I found what's the problem. Indeed, #fill_in works correct, autocomplete list is shown. But when I try to #click_on some item by text, capybara can't find a link.

    Capybara::ElementNotFound:
    Unable to find link or button "bla-bla"

The reason is that Jquery UI Autocomplete generates links without href attribute:

    <li class="ui-menu-item" role="presentation">
      <a id="ui-id-3" class="ui-corner-all" tabindex="-1">bla-bla</a>
    </li>

If you add href, #click_on works good on links. I don't know is that fault of capybara or jQueryUI, tell me. So to click I use previously adviced js:

    page.execute_script("$('.ui-menu-item:contains(\"#{company.name}\")').find('a').trigger('mouseenter').click()")

[mhoran]

Good catch. This does sound like a JQuery UI/Capybara compatibility issue. Capybara will only find links that have an href attribute. Of course, you can find an anchor as you discovered, and manually trigger a click. As of the latest capybara-webkit, you can also use #hover instead of #trigger('mouseenter') for the same behavior.

[calleluks]

Can someone confirm whether or not this issue still exists in the latest version of capybara-webkit?

[calleluks]

I'll close this issue due to inactivity. Please re-open it if you're still experiencing these issues.

[KernelFolla]

i can confirm that it's a JQuery UI issue, absolutely not related to capybara, because same issue exists on all headless environments and can be solved easily doing js tricks described in this issue

[ethanator]

This worked for me.

def fill_in_autocomplete(id, value)
    page.execute_script("document.getElementById('#{id}').setAttribute('value', '#{value}');")
end

[joycesolis]

Thankyou for the solution Ethanator, worked, had been searching for a solution but nothing else worked.