We are a software consultancy based in Berlin, Germany. We deliver
high quality web apps in short timespans.

Upstream Agile GmbH Logo

Testing the AnyTime date picker with Cucumber/Selenium

March 20, 2011 by Alex

On Cobot we are making extensive use of the AnyTime date picker. When it came to integration testing with Cucumber/Capybara, until recently I got away with using the Rack::Test driver and doing

And I fill in "2010-01-01 12:45:00" for "Date"

Yesterday I finally needed to enter a date in a Scenarion that was using Javascript (with the Selenium driver. With JavaScript enabled the above step doesn’t work anymore because when Selenium tries to type into the text field Anytime pops up and resets the text field’s contents. After some fiddling around I decided that I would make selenium click the actual buttons on the date picker. Not only did this seem to be the least hackish way, it would also mean I would be testing the real thing, i.e. clicking on buttons like a user would. This becomes especially important once you start with internationalization and different time formats (e.g. 24h vs. 12h system), where you want to make sure AnyTime generates the proper date string.

Long story short, it took me almost a day to figure out how to do this. I played around with a lot of variations, but in the end this is what you have to do:

When /I select the time "([^"]+)" from "([^"]+)"/ do |time_string, label|
  time = Time.parse(time_string)
  And %Q{I fill in "" for "#{label}"}

  click_on_selectors ".AnyTime-btn:visible:contains(#{time.year})",

def click_on_selectors(*selectors)

  def recurse(*selectors)
    if selectors.any?
        "$('#{escape_javascript selectors.first}').click(); #{recurse(*selectors[1..-1])}")
      'window.__capybara_wait = false;'

  page.evaluate_script "window.__capybara_wait = true"
  page.evaluate_script recurse(*selectors)
  wait_until 10 do
    page.evaluate_script "!window.__capybara_wait"

include ActionView::Helpers::JavaScriptHelper
def wait_for_css_selector_fn(selector, after)
    (function() {
      var time = new Date().getTime();
      var runDelayed = function() {
        if(!$('#{escape_javascript selector}').length) {
          if(time < new Date().getTime() - 5000) {
            throw('waited too long for #{escape_javascript selector}')
          } else {
            window.setTimeout(runDelayed, 100);
        } else {
      window.setTimeout(runDelayed, 100);

In you Cucumber feature you can then call:

When I fill in the time "2010-01-01 12:00" for "Date"

What the above code essentially does is open the date picker and click on all the required buttons. Just as important (and that was the tricky part) it asynchronously waits for the necessary events (open/close date picker, date shows up in text field). Enjoy.

Hello Explorer!

You’ve found our very old Website Archive (2007-2012). It’s a bit out of date, but we love looking back at how it all started - and how far we’ve come since then! We’re now fully focused on building our coworking management product, Cobot.

Take a look →