How to test jQuery TokenInput field using Selenium

Question

I'm unable to test a Tokeninput field in a form using selenium. The situation is when we type something, it gives a list to options to select but those options aren't part of the DOM. The text fills the field but doesn't select the item.

The code which I have written is:

Given admin user is on schedule interview page
And he select "obie[1]" and "DHH[1]" from the candidate name(s) auto sugget field

**step defination**
Given /^he select "([^"]*)" and "([^"]*)" from the candidate name\(s\) auto sugget field$/ do |arg1, arg2|

within(:css, "#interview_template_candidate_names_input") do

    fill_in('tmp',:with => arg1)              --tmp is name of the token input field
    find("li:contains('obie[1])'").click
    save_and_open_page
  end
 end

Answer 1

I finally succeeded in making this work. Here's the gist: https://gist.github.com/1229684

The list is part of the dom (div.token-input-dropdown), it's added as the last child of the body element, which is probably why you didn't see it.

If you understand what the tokeninput plugin is doing, you can get a better idea of what you need to do. For each tokeninput you create, the plugin:

1. creates a ul.token-input-list (immediately before input#your_input_id)
2. creates a ul.token-input-list input#token-input-your_input_id
3. hides the input#your_input_id
4. creates a div.token-input-dropdown

So the most challenging part is finding the correct ul.token-input-list, because you have to find it based on its position relative to the original input, and the selenium webdriver doesn't let you navigate the dom.

After that, you just fill in the input#token-input-your_input_id and "click" on the div.token-input-dropdown li option that matches what you're looking for.