Làm thế nào để FILL_IN datepicker sử dụng Capybara, Rails, MiniTest đặc tả

Question

Tôi có một form_tag mà tạo ra mã HTML sau đây:

<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> 

Trên đây là TẤT CẢ của HTML được tạo ra. Tôi đã xóa bất kỳ partials và bố cục nào để thử và thực hiện gỡ lỗi vấn đề này dễ dàng nhất có thể.

Các trường datepicker gọi trên thanh công cụ ngày của giao diện người dùng jquery.

Tôi muốn tránh javascript cho thử nghiệm của mình và chỉ cần điền vào các trường ngày có ngày văn bản. Tôi đã thử fill_in "datepicker_mini", :with => "01/01/2010" nhưng trong khi nó không gây ra kiểm tra thất bại nó cũng không điền vào lĩnh vực này khi tôi sử dụng save_and_open_page để kiểm tra.

Cập nhật: kiểm tra mã

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 

Bất kỳ trợ giúp sẽ được đánh giá rất nhiều.

Cảm ơn.

Answer 1

tôi đã gặp vấn đề tương tự. Sau khi đọc tài liệu về capybara, giải pháp của tôi là sử dụng page.execute_script() để đặt giá trị trực tiếp vào đầu vào.

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

Điều này hơi bẩn, tôi nghĩ, nhưng làm việc cho tôi.

Gotchas:

• tôi sử dụng ổ Selenium.
• Tôi chạy ví dụ với js: true
• Tôi đã sử dụng plugin có tên là zebra để tạo trình đặt ngày, nhưng nguyên tắc thì giống nhau.

Chỉnh sửa: Điều này làm cho Poltergeist cũng

Answer 2

Tôi thích giải pháp này:

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

Taken từ đây http://api.jqueryui.com/datepicker/#method-setDate

Answer 3

Các giải pháp trên không làm việc cho tôi. Có lẽ vì không có trường đầu vào trên ứng dụng mà tôi đang viết thử nghiệm. Giải pháp của tôi là xấu hơn rất nhiều, nhưng nó chọn ngày và xác minh việc lựa chọn trong một datepicker là GUI chỉ.

##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 

Answer 4

nếu bạn muốn mô phỏng lần nhấp UI, điều này phù hợp với tôi (sử dụng trình điều khiển javascript).

khi ID trình đặt ngày của tôi là 'target_date', điều này sẽ chuyển đến tháng sau, sau đó chọn ngày 15.

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') }