Testing rails' autocomplete with cucumber

Question

Hi!

I need to test an autocomplete field with cucumber. How can I do that? I tried

  Scenario: Using Autocomplete   
  Given I am on the home page
  And there are the following users:
    |id |name   |
    |1  |foo    |
  When I fill in "name" with "f" 
  Then I should see "foo" 

But then it fails because expected the following element's content to include "foo". Any ideas?

Answer 1

Autocomplete uses Javascript to set the value of a text field ("name" in your case). Since Cucumber uses Webrat to inspect the response coming back from the server, and Webrat doesn't support Javascript, your scenario fails.

Cucumber can use Selenium to automate Javascript testing and verify that the expected values are being plugged in. More info here.

Answer 2

You need to use a JS-enabled driver for your test. If you are using webrat o capybara you can try using selenium.

Then I should see "foo" 

This doesn't work using the default web step because the DOM has not been updated when it looks for the text. There are 2 options:

Option 1: Wait

And I wait for 1 second
Then I should see "foo"

You need to implement this step to call sleep(n)

Option 2: Custom locate

Capybara's locate method will see if the target is present in the DOM. If not it will wait for a few seconds and try again and throw an error if it's still not present.

Then I should see the following autocomplete options:
| foo |

This is how the implementation of the steps looks like for me:

Then /^I should see the following autocomplete options:$/ do |table|
  table.raw.each do |row|
    locate(:xpath, "//a[text()='#{row[0]}']")
  end
end

If you need more detailed information on this subject I have written a blogpost with examples and some snippets, also dealing with clicking the autocomplete options presented:

http://www.aentos.com/blog/testing-ajax-autocomplete-fields-cucumber-and-capybara