如何使用Capybara,Rails,MiniTest规范fill_in datepicker

时间:2013-04-17 02:28:38

标签: ruby-on-rails-3 capybara minitest

我有一个form_tag,可以生成以下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>

以上是所有生成的HTML。我已经删除了任何部分和布局,以尽可能简单地调试此问题。

datepicker字段调用jquery UI datepicker。

我想避免使用javascript进行测试,只需使用文本日期填写日期字段即可。我已经尝试了fill_in "datepicker_mini", :with => "01/01/2010"但是虽然它不会导致测试失败,但当我使用save_and_open_page进行测试时,它也不会填写该字段。

更新:测试代码

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

非常感谢任何帮助。

感谢。

5 个答案:

答案 0 :(得分:23)

我有同样的问题。在阅读了capybara的文档后,我的解决方案是使用page.execute_script()直接设置输入值。

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

我认为这有点脏,但对我有用。

陷阱:

  • 我使用了Selenium驱动器。
  • 我用js:true
  • 运行示例
  • 我使用了一个名为zebra的插件来生成日期选择器,但原理是一样的。

编辑:这也适用于Poltergeist

答案 1 :(得分:6)

我喜欢这个解决方案:

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

从这里采取http://api.jqueryui.com/datepicker/#method-setDate

答案 2 :(得分:6)

如果你想模拟用户界面点击,这对我有用(使用javascript驱动程序)。

当我的datepicker的ID为'target_date'时,导航到下个月,然后选择第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') }

答案 3 :(得分:0)

上述解决方案对我不起作用。也许是因为我正在编写测试的应用程序上没有输入字段。我的解决方案非常丑陋,但它选择日期并在仅限GUI的日期选择器中验证选择。

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

答案 4 :(得分:0)

这对我有用。重要的是日期必须采用这种格式,否则日期选择器将不会解析该日期。 page.execute_script %Q{ $("md-datepicker[name='datepicker_mini'] input").val('2010-1-1').trigger('input') }