20

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.

Marklar
  • 1,247
  • 4
  • 25
  • 48
  • Can you post the code for the test? – declan Apr 17 '13 at 05:09
  • Added test code. Please let me know if you need any further information. Thanks. – Marklar Apr 17 '13 at 05:38
  • Is it possible there is a hidden field with the same name somewhere on the page? – declan Apr 17 '13 at 16:18
  • I thought that myself from reading another thread on Stackoverflow but I searched the generated HTML and could not find another instance of datepicker_min. – Marklar Apr 18 '13 at 01:17
  • I have removed all partials and layouts from my view to make the code as basic as possible and updated this question with the new generated HTML. I still can't seem to get to the bottom of this. – Marklar Apr 19 '13 at 03:05

7 Answers7

28

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

Adam Barthelson
  • 1,088
  • 1
  • 11
  • 20
Armando
  • 940
  • 7
  • 16
9

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

freemanoid
  • 14,592
  • 6
  • 54
  • 77
7

if you want to simulate the UI clicks, this works for me (using a javascript driver).

when my datepicker's ID is 'target_date', this navigates to next month, then selects the 15th.

page.execute_script %Q{ $('#target_date').trigger('focus') }
page.execute_script %Q{ $('a.ui-datepicker-next').trigger('click') }
page.execute_script %Q{ $('a.ui-state-default:contains("15")').trigger('click') }
Sean M
  • 1,990
  • 20
  • 16
1

This works for me. It's important that the date is in that format as it won't parse by the date picker otherwise. page.execute_script %Q{ $("md-datepicker[name='datepicker_mini'] input").val('2010-1-1').trigger('input') }

Baz
  • 101
  • 4
  • This is the real answer. Normal capybara commands work, the format just needs to be in `yyyy-mm-dd` – germs12 Apr 19 '23 at 13:39
0

The above solution did not work for me. Perhaps because there is no input field on the application I am writing tests for. My solution is a lot uglier, but it picks dates and verifies the selection in a datepicker that is GUI only. 

##selects 'Custom' option, then specified dates, and verifies that specified dates are displayed.
Then(/^select "Custom" values, "([^"]*)" to "([^"]*)" and verify selection$/) do |arg1,arg2|
  step %{select 'Custom' from timespan drop-down}
  start = Date.strptime("#{arg1}",'%m/%d/%Y')
  start_day = start.day
  start_month = start.strftime('%b')
  start_year = start.year
  stop = Date.strptime("#{arg2}",'%m/%d/%Y')
  stop_day = stop.day
  stop_month = stop.strftime('%b')
  stop_year = stop.year
  within('.left.hasDatepicker') do
    find('.ui-datepicker-year').click
    find('option', :text => start_year).click
    find('.ui-datepicker-month').click
    find('option', :text => start_month).click
    find('.ui-state-default', :text => start_day, :match => :prefer_exact).click
  end
  within('.right.customdatepicker') do
    find('.ui-datepicker-year').click
    find('option', :text => stop_year).click
    find('.ui-datepicker-month').click
    find('option', :text => stop_month).click
    find('.ui-state-default', :text => stop_day, :match => :prefer_exact).click
  end
  find('input[value="Go"]').click
  date_picker = find('.timespanperiod').text
  start_date, end_date = date_picker.split(" - ")
  start_formatted = Date.strptime("#{start_date}",'%d/%m/%Y')
  end_formatted = Date.strptime("#{end_date}",'%d/%m/%Y')
  start_formatted.should eq (Date.strptime("#{arg1}",'%m/%d/%Y'))
  end_formatted.should eq (Date.strptime("#{arg2}",'%m/%d/%Y'))
end
Gabriel Pumple
  • 783
  • 5
  • 16
0

Adding find(".active.day").click after fill_in worked for me:

within("#dates_form") do
  fill_in "datepicker_mini", :with => "01/01/2010"
  find(".active.day").click
  fill_in "datepicker_maxi", :with => "01/01/2020"
  find(".active.day").click
end
Yoav Epstein
  • 849
  • 9
  • 7
0

I am using Minitest with Capybara, and was able to do the following:

fill_in "Starts at", with: "2023-04-22T10:00:00"

The formatting matches what is automatically displayed as the value for the field when you use your browser's Inspect tool.

therealrodk
  • 386
  • 2
  • 10