Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery Chosen Testing with Capybara
=begin
Notes
=====
Labels: On the label you should put a "for" attribute if you're not using something like simple_form
This helps capybara to find your field
e.g. <label for="my_field_id">Some label</label>
=end
field = "Label on my field"
value = "existing option in list"
# Find the field
field = find_field(field_name)
# Open the Chosen drop down
page.execute_script(%Q!$("##{field[:id]}_chzn").mousedown()!)
# Simulate text being typed
typed_text = ""
value.chars.each do |char|
typed_text += char
# Put a value in the search field
page.execute_script(%Q!$("##{field[:id]}_chzn input").val("#{typed_text}")!)
# Fire the search via a keyup
page.execute_script(%Q!$("##{field[:id]}_chzn input").keyup()!)
end
# Do the selection via firing a keyup on the Enter key when you have the exact text for the option
page.execute_script(%Q!$("##{field[:id]}_chzn input").trigger(jQuery.Event("keyup", { keyCode: $.ui.keyCode.ENTER }))!)
# OR
# Do the selection via firing a mouse up on the option when you have partial text for the option
page.execute_script(%Q!$("##{field[:id]}_chzn .chzn-results li:contains('#{value}')").mouseup()!)
=begin
Notes
=====
Labels: On the label you should put a "for" attribute if you're not using something like simple_form
This helps capybara to find your field
e.g. <label for="my_field_id">Some label</label>
=end
field = "Label on my field"
value = "partial text for an existing option in list"
# Find the field
field = find_field(field_name)
# Open the Chosen drop down
page.execute_script(%Q!$("##{field[:id]}_chzn").mousedown()!)
# Simulate text being typed
typed_text = ""
value.chars.each do |char|
typed_text += char
# Put a value in the search field
page.execute_script(%Q!$("##{field[:id]}_chzn input").val("#{typed_text}")!)
# Fire the search via a keyup
page.execute_script(%Q!$("##{field[:id]}_chzn input").keyup()!)
end
# If you're using Ajax Chosen then wait for the Ajax callback
sleep 1
start_time = Time.now
page.evaluate_script('jQuery.isReady&&jQuery.active==0').class.should_not eql(String) until page.evaluate_script('jQuery.isReady&&jQuery.active==0') or (start_time + 5.seconds) < Time.now do
sleep 1
end
# Do the selection via firing a mouse up on the option
page.execute_script(%Q!$("##{field[:id]}_chzn .chzn-results li:contains('#{value}')").mouseup()!)
# Check that the selection has been made
# Webkit
select_option_text = find_field(field_name).find("option[@value='#{selected_value}']").text
# Selenium
select_option_text = find_field(field_name).find("option[@value='#{selected_value}']")[:text]
@jarthod
Copy link

jarthod commented Feb 20, 2013

Very nice, thanks ;)

Loading

@gma
Copy link

gma commented Aug 3, 2013

This works really nicely for me, thanks. I'm using it with Poltergeist.

Loading

@malcolmbaig
Copy link

malcolmbaig commented Aug 22, 2013

Thanks, works really well. Note that with Capybara 2+ you need to pass 'visible: false' to find_field. So the above would read:

find_field(field_name, visible: false)

Loading

@aldefouw
Copy link

aldefouw commented Nov 28, 2018

I found this thread helpful for getting me started on how to tackle this problem some 5 years later.

Here is what my code looks like:

 # Find the field
  id = find_field(label, visible: false)[:id]

  # Open the Chosen drop down
  page.execute_script(%Q!$("##{id}_chosen").mousedown()!)

  # Put a value in the search field
  page.execute_script(%Q!$("##{id}_chosen input").val("#{option}")!)
  # Fire the search via a keyup
  page.execute_script(%Q!$("##{id}_chosen input").keyup()!)

  # # Do the selection via firing a mouse up on the option
  page.execute_script(%Q!$("##{id}_chosen .chosen-results li:contains('#{option}')").mouseup()!)

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment