TokenInput Cucumber Helper

token_input_helpers.rb

module TokenInputHelpers
  def token_input(locator, options)
    raise "Must pass a hash containing 'with'" unless options.is_a?(Hash) && options.has_key?(:with)

    field = _find_fillable_field(locator) # find the field that will ultimately be sent to the server, the one the user intends to fill in

    # Delete the existing token, if present
    begin
      # This xpath is finds a <ul class='token-input-list'/> followed by a <input id="ID"/>
      within(:xpath, "//ul[@class='token-input-list' and following-sibling::input[@id='#{field[:id]}']]") do
        find(:css, ".token-input-delete-token").click
      end
    rescue Capybara::ElementNotFound
      # no-op
    end
    ti_field = _find_fillable_field("token-input-#{field[:id]}") # now find the token-input
    ti_field.set(options[:with]) # 'type' in the value
    wait_for_ajax
    within(:css, ".token-input-dropdown") { find("li:contains('#{options[:with]}')").click } # find the matching element, and click on it
  end

  def wait_for_ajax
    wait_until { page.evaluate_script('$.active') == 0 }
  end

  protected
    def _find_fillable_field(locator)
      find(:xpath, XPath::HTML.fillable_field(locator), :message => "cannot fill in, no text field, text area or password field with id, name, or label '#{locator}' found")
    end
end
World(TokenInputHelpers)

There is a caveat:

All of my tokeninputs are limited to a single token (token-limit: 1) - I'm sure it won't work in this form if you have multiple tokens, because this is deleting the existing token.

The basic idea is:

1. find the field (input) the user is intending to fill in
2. delete the existing token if it's there [this should probably be broken out into it's own method, e.g. #delete_token()]
3. find the tokeninput input
4. fill in the tokeninput
5. wait for ajax requests to complete
6. click on the token

Usage
I tried to make this behave similar to the #fill_in(), for example:

When /^I set "([^"]*)" as the bar$/ do |foo|
  token_input("Bar", :with => foo)
end

You are a champion!

Agreed! This works like a charm! Thanks so much for sharing!

I've tried to make this work for inputs with multiple tokens. Seemed simple, but there's one weird gotcha. After the first token has been selected, Selenium can't fill in the token input field any longer, considering it invisible. I couldn't figure out what goes wrong, since the input is clearly visible both in the browser instance launched by the web driver and when testing manually. I had to work this around by triggering the subsequent searches with a script:

https://gist.github.com/artem-mindrov/5248796

Has anyone else encountered this? Any reasonable explanation or a better idea?

Works great.
But, when you have more than one tokeninputs on the page, it fails on within(:css, ".token-input-dropdown") as there will be more than one ".token-input-dropdown" elements.
Replace with within(:css, ".token-input-dropdown:not(:empty)") to fix it.

Works Great!!
But when you have more that one token inputs on the page, it fails on within(:css, ".token-input-dropdown") because there will be more than one ".token-input-dropdown" elements on the page.
Changing it to within(:css, ".token-input-dropdown:not(:empty)") will fix it.

Works Great!!
But when you have more that one token inputs on the page, it fails on within(:css, ".token-input-dropdown") because there will be more than one ".token-input-dropdown" elements on the page.
A slight addition within(:css, ".token-input-dropdown:not(:empty)") will fix it

I had some trouble with Capybara 2.1, so I forked it and tweaked things a bit to fix it: https://gist.github.com/ddonahue99/6116406

Use this: https://gist.github.com/victorhazbun87/46d86d9de77540bbbceb