Problem with datepicker in capybara test

Question

I am using Capybara 1.0.0 for my acceptance test and really liked it until I got stuck in one place. My problem is I have used jQuery datepicker, and right now I am confused how to select date from datepicker in my test spec.

Any help would be highly appreciated.

Nexus

We had a similar issue and our solution was to just enter the date into the datepicker text field rather than try to click the calendar popups. The rationale was that we don't want to test the jQuery code--we're testing our code. /punt! – Rancho

I did the same thing today, didn't even want to attempt using the datepicker itself. Plus, I'm writing tests for a working application (naughty, I know) and I already know the datepicker's functioning properly. – Andiron

Answer 1

Maybe it's a good idea to test it because date formats might cause issues when saving into the database. Here is how I did it:

page.execute_script %Q{ $('#auction_event_date').trigger("focus") } # activate datetime picker
page.execute_script %Q{ $('a.ui-datepicker-next').trigger("click") } # move one month forward
page.execute_script %Q{ $("a.ui-state-default:contains('15')").trigger("click") } # click on day 15

The test must run with the javascript driver.

Honeysweet

choose a specific month with page.execute_script %Q{ $('.ui-datepicker-month').val("4") } (0-based index, so 4 would be May). Similarly choose specific year with page.execute_script %Q{ $('.ui-datepicker-year').val("2016") }. – Prig

Answer 2

I don't like using javascript. I simply expose the alt field if Rails.env.test? and target the alt directly with Capybara.

I create a helper method that generates the datepicker input and hidden fields (its a bit long, and I think unnecessary to show it all). In that method I use:

 def date_picker(options={})

    alt_field = Rails.env.test? ? "string" : "hidden"
    input = "#{ options[:f].input options[:field], as: alt_field.to_sym, input_html: {id: "#{options[

The "as: alt_field.to_sym" is what exposes the date_picker hidden alt field. I can then target the alt field input (which is the one handled by the model) in Capybara with:

  fill_in 'userdoc[issued_date]', with: "2013-05-02

Easy, fairly clean, no javascript...

Deandeana

Answer 3

Look my example, maybe it help you

  find("input.form-control.date-mask[ng-model='scope.values.created_at.start']").set(Date.yesterday)

Crotch

This looks like an AngularJS solution. Are you sure this is appropriate for the question? – Embay

Answer 4

For whatever reason page.execute_script answer from above didn't work for me. However, this is a hacky way to get the calendar to open up.

#trigger opening of calendar    
fill_in('#auction_event_date', with: "2013-05-01) 
#select specific day
click_link("27")

Congratulant

Answer 5

In helpers:

def fill_flatpickr_time_field(selector, value)
    page.execute_script "$('#{selector}').val('#{value}')"
end

Test example:

fill_flatpickr_time_field('#article_calendar_end_time', '08:00')

Toed