How to fill_in datepicker using Capybara, Rails, MiniTest spec

Question

I have a form_tag that generates the following HTML:

<form accept-charset="UTF-8" action="http://www.example.com/product_page" id="dates_form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
  Min date: <input id="datepicker_mini" name="datepicker_mini" type="text" />
  Max date: <input id="datepicker_maxi" name="datepicker_maxi" type="text" />
</form>

The above is ALL of the generated HTML. I have removed any partials and layouts to try and make debugging this issue as easy as possible.

The datepicker fields call on jquery UI datepicker.

I would like to avoid javascript for my test and simply fill in the date fields with text dates. I have tried fill_in "datepicker_mini", :with => "01/01/2010" but whilst it does not cause the test to fail it also does not fill in the field when I use save_and_open_page to test.

Update: TEST CODE

it "runs report" do
  login_test_user
  within("#dates_form") do
    fill_in "datepicker_mini", :with => "01/01/2010"
    fill_in "datepicker_maxi", :with => "01/01/2020"
  end
  save_and_open_page
end

Any help would be greatly appreciated.

Thanks.

Answer 1

i had the same problem. After reading the documentation of capybara, my solution was to use page.execute_script() to set a value directly to the input.

## fill_in "person_birthdate, with: "21/12/1980"
page.execute_script("$('#person_birthdate').val('21/12/1980')")

This a little dirty, i think, but work for me.

Gotchas:

• I used Selenium drive.
• I run the example with js: true
• I used a plugin called zebra to generate the datepickers, but the principle is the same.

Edit: This works for Poltergeist as well

Answer 2

I like this solution:

page.execute_script("$('#show_sale_date').datepicker('setDate', '01/01/2010')")

Taken from here http://api.jqueryui.com/datepicker/#method-setDate