Skip to content
agosto 2, 2010 / cassiomarques

How to test autocomplete text fields with Cucumber + Capybara + Selenium

A quick tip about how to test that cool jQuery autocomplete text box that you have in your app.

To test autocomplete text fields you will need to use some driver capable of running JavaScript. With Capybara, the mos common JavaScript drivers are Selenium (through Selenium Webdriver) and Culerity. I choose Selenium, since it works better for me. The idea is pretty simple:

  1. Type a few characters inside the field. This should trigger the autocomplete’s search
  2. Select the desired option
  3. Check the result

This can be easily accomplished with the following Cucumber feature:


When I fill in "Programmers" with "Dijkstra"
And I select the option containing "Edsger Dijkstra" in the autocomplete
And I press "Search"
Then I should see "He's watching."

The step for the autocomplete selection could be implemented like

When(/^I select the option containing "([^\"]*)" in the autocomplete$/) do |text|
  locate("li:contains('#{text}')").click
end

Here I took advantage of the HTML structure generated by the jQuery autocomplete plugin, which displays results in a list, where each item is a <li> element. Note that this solution may not work with other autocomplete implementations.

The above solution is very simplistic. Using other CSS selectors in the step implementation it would be possible to better filter the found elements.

With Capybara, all you have to do is put a @selenium tag right above the scenario in your .feature file, to force Capybara to use the Selenium driver to run it.

5 Comentários

Deixe um comentário
  1. Boblin / set 7 2010 10:42 am

    Thank’s for sharing!

  2. Zachery / out 8 2010 12:46 am

    Thanks for the article. I’ve noticed though in selenium using the fill_in() method that capybara’s default ‘fill in’ step uses, does NOT trigger the change event in the browser, and ive had to write my own step to trigger this event for me. Did you do anything special for this or modify capybara’s web_steps.rb or anything to this nature?

    • cassiomarques / out 8 2010 12:52 am

      Zachery,

      No, I didn’t do anything at all, just used the default fill_in method provided by Capybara. I used to have the behaviour you described when using Webrat, but not with Capybara + Webdriver. Are you using Firefox in your tests? Another thing to note is that as far as I know Chrome + Webdriver is unable to trigger native events such as keypress.

      • Zachery / out 8 2010 3:41 am

        I have Cucumber + Capybara + Selenium. not sure its using ‘webdriver’ per say :x it DOES use Firefox. this is in Rails 3 with Ruby 1.9.2 so im not able to use Selenium RC.

  3. Jero / mar 7 2011 10:39 pm

    I have selenium and capybara on cucumber, but I still get this error: undefined method `locate’ for # (NoMethodError)

    Not sure what the issue is. I added the @selenium tag…

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: