Search code examples
ruby-on-railscucumbercapybarajquery-select2jquery-select2-4

Selecting an option with select2 and Capybara running Cucumber test

I have a select2 v4 that loads options through AJAX. I am running a Cucumber test where I need to select 2 options of the list, but I can't seem to make the list open up and load (which normally gets populated when I type 2 or characters).

I have tried:

As suggested here:

@session.execute_script("$('#publish_to').select2('open')")

and

@session.first(".input.publish_to .select2-container").click

and

@session.first("#publish_to").find(".select2-choice").click

which do not give me an error, but I am not getting the options to select, so I am assuming that the click is not really working. Things I have tried to select the options:

# This one cannot find the css:
@session.find(".select2-results__options", text: client.email).click

# This one gives me a Timeout error 
@session.evaluate_script "$('#publish_to').val(#{client.id}).trigger('change')"

# This one gives me a Timeout error 
@session.evaluate_script "$('.select2-search__field').trigger('keydown').val('#{client.email}').trigger('keyup')";
sleep 10
@session.find('.select2-search__option', text: client.email).click

Anything with trigger gives me a Timeout error, so I tried waiting for jQuery.active but I never got a true even waiting for 2 minutes:

counter = 0
 timeout_in_sec = 120
 while counter < timeout_in_sec && @session.evaluate_script('jQuery.active').zero?
   sleep 1.second
   counter+=1
 end

I tried using the gem capybara-select2 running: @session.select2 client.email, css: '#publish_to', search: true but I get the error undefined methodselect2' for #and I haveWorld(CapybaraSelect2)in myenv.rb`

I am using Cucumber v3.1.2 with ruby gem 'cucumber-rails'

Solution

  • The poltergeist driver is roughly equivalent to a 7 year old version of Safari which means it doesn't support a lot of current JS/CSS. This means your issue could simply be that select2 is no longer compatible with Poltergeist (without a lot of polyfilling). You're going to be much better off updating to using a real browser (stable - chrome via selenium, etc) or one of the direct to Chrome drivers (highly beta) that have spun off Poltergeist (Apparition is one of them). Those will allow you to run with a visible browser (useful for debugging) or headless.

    The following code uses Chrome via selenium and interacts with the select2 demo site to select an entry that is loaded via Ajax.

    require "selenium/webdriver"
require "capybara/dsl"

sess = Capybara::Session.new(:selenium_chrome)
sess.visit("https://select2.org/data-sources/ajax")

sess.first('.select2-container', minimum: 1).click
sess.find('.select2-dropdown input.select2-search__field').send_keys("capy")

sleep 5 # just to watch the browser search

sess.find('.select2-results__option', text: 'teamcapybara/capybara').click

sess.assert_selector(:css, '.select2-selection__rendered', text: 'teamcapybara/capybara')

sleep 5 # just to see the effect