unable to find css

[nekapoor]

Hello!

I'm running into an error when running this in rspec. I get this error:

Capybara::ElementNotFound:
Unable to find css ".select2-drop li" with text "Test"

When I run rspec, my browser starts up and the dropdown does actually open up and I see the "Test" item there, but then the dropdown just closes up without selecting the "Test" item. And then I get this "unable to find css" error.

Any ideas on what's going on?

[thewatts]

I'm having a similar issue 👍

[kiddrew]

Me too:

Unable to find css ".select2-choice"

I'm using select2 v 3.5.2, and I don't see a select2-choice class anywhere. Maybe the gem is intended for another version?

[divineforest]

Try using gem from github, not from rubygems

[kiddrew]

Did that. Now it's throwing a different "unable to find css" error.

Unable to find css ".select2-with-searchbox input.select2-input"

[MelnikVasya]

Gem from github

Capybara::ElementNotFound:
       Unable to find css ".select2-choices"

[bertBruynooghe]

Can any of you post the code you're trying to execute?

[lcguida]

I'm using version 4.0.0 and receiving the same message.

(byebug) select2 site.name, from: "Site"
*** Capybara::ElementNotFound Exception: Unable to find css ".select2-choices"

[josegm]

Similar message for me:

Capybara::ElementNotFound:
       Unable to find css ".select2-container"

The select2-container class is there if I inspect the element.

[jngarcia-zz]

Me too:

Capybara::ElementNotFound:
  Unable to find css ".select2-container"

[lvanhung]

I got same issue :(

Unable to find css ".select2-container"

[rkotov93]

Hi!
I had the same issue with

Capybara::ElementNotFound:
  Unable to find css ".select2-container"

Try to use github version of gem. It was helpful for me.

[rkotov93]

But I still have

Capybara::ElementNotFound:
  Unable to find css ".select2-choices"

To solve it, I specified xpath to select2 container, because gem looks exactly for it as it turned out:

xpath: '//div[contains(@class, "select2-container")]'

[lvanhung]

@rkotov93
Thanks for your sharing.
How about if the page has multiple select2 ? I guess your solution will not work.
I found a solution in stackoverflow. it works with selenium driver

   def select2(value, attrs)
        s2c = first("#s2id_#{attrs}")
        (s2c.first(".select2-choice") || s2c.find(".select2-choices")).click
        find(:xpath, "//body").all("input.select2-input")[-1].set(value)
        page.execute_script(%|$("input.select2-input:visible").keyup();|)
        drop_container = ".select2-results"
        find(:xpath, "//body").all("#{drop_container} li", text: value)[-1].click
    end

[rkotov93]

@lvanhung
Yes, you're absolutely right. Do you need to choose the same option for each select2 on the page?
I think you can try something like this:

page.all(:xpath, '//*[contains(@class, "select2-container")]').each do |s2c|
  select2(value, xpath: s2c.path)
end

Warning
This solutions should work with Selenium, but doesn't work with Poltergeist. Please, give a feedback if try.

[lvanhung]

@rkotov93
this work for both poltergeist & Selenium
for raketest driver I use the following code

select('Option', :from => 'Select Box')

[NySiya]

I have got this error, too.
Capybara::ElementNotFound: Unable to find css ".select2-container"

[jlgasparrini]

Hi @rkotov93, sorry to bother you. Your solution doesn't work for me with capybara-webkit.

I have got this error too:

     Capybara::ElementNotFound:
       Unable to find css ".select2-choices"

Can you help me please?

[rkotov93]

@jlgasparrini Can you show your code?

[jlgasparrini]

Yes, sure @rkotov93

# Gemfile.rb
...
gem 'capybara'
gem 'capybara-webkit'
gem 'capybara-select2'
...

# report_school_type_spec.rb

feature 'report school type' do
  before(:each) do
    @prof = FactoryGirl.create :staff
    @note_type = FactoryGirl.create :note_type, institution: @prof.institution

    login_as @prof.user, scope: :user
  end

  scenario 'create with one report school column', js: true do
    visit new_staff_report_school_type_path

    fill_in ReportSchoolType.human_attribute_name(:name), with: 'Report school 2'
    find_button('Add new column').click
    fill_in 'Amount of notes', with: '3'

    #select2 @note_type.name, xpath: "//div[contains(@class, 'select2-container')]", search: true

    page.all(:xpath, '//*[contains(@class, "select2-container")]').each do |s2c|
      select2(@note_type.name, xpath: s2c.path)
    end

    click_button I18n.t 'staff.report_school_types.new.new'
    msg = I18n.t 'staff.report_school_types.create.success'
    expect(page).to have_content msg
  end
end

And when I run the test suite bin/rails spec
I have got:

     Failure/Error: select2(@note_type.name, xpath: s2c.path)
     Capybara::ElementNotFound:
       Unable to find css ".select2-choices"

Thanks @rkotov93 ^^

[rkotov93]

@jlgasparrini It looks like you really haven't any choises on the page. Can you show your view?
Also, try to make html screenshot before

page.all(:xpath, '//*[contains(@class, "select2-container")]').each do |s2c|
  select2(@note_type.name, xpath: s2c.path)
end

and check the code for choices.
You can use capybara-screenshot gem for it.

[jlgasparrini]

Exactly @rkotov93, you're right! I search in my html and the selector .select2-choices didn't exist. The screenshot show me that Select2 was opened but nothing inside.

I think the problem is because Select2 options not yet exist, these are obtained from my server.

<!-- _my_partial.html.erb -->
<div class="col-xs-12 col-sm-6 form-group">
  <%= f.label :note_type_id %>
  <%= f.select :note_type_id, nil, {}, { class: 'form-control' } %>
</div>

# report_school_types.coffee.erb
ReportParameter.note_types = do ->
  init: ->
    select2_options = do ->
      minimumInputLength: 2
      theme: 'bootstrap'
      ajax:
        url: "<%= url_helpers.staff_notes_types_path(format: :json) %>"
        dataType: 'json'
        data: (params) ->
          selected_note_types = new Array()
          $('#report-parameters select').each (i, note_type) ->
            selected_note_types.push note_type.name if note_type.name
          return {
            select_q: params.term
            selected: selected_note_types
          }
        processResults: (data, params) ->
          processed = []
          $.each data, (index, item) ->
            processed.push
              id: item.id
              text: item.name + ' (' + item.abbreviation + ')'
          return results: processed
    $('#report-parameters')
      .on 'cocoon:before-insert', (e, to_be_added) ->
        to_be_added.fadeIn(250)
      .on 'cocoon:after-insert', (e, added) ->
        $('select:first', added).select2(select2_options).select2('open')
      .on 'cocoon:before-remove', (e, to_be_removed) ->
        $(this).data('remove-timeout', 200)
        to_be_removed.fadeOut(150)
    $('#report-parameters')
      .on 'cocoon:before-insert', (e, to_be_added) ->
        to_be_added.fadeIn(250)
      .on 'cocoon:after-insert', (e, added) ->
        $('select:last', added).select2(select2_options)
      .on 'cocoon:before-remove', (e, to_be_removed) ->
        $(this).data('remove-timeout', 200)
        to_be_removed.fadeOut(150)

[rkotov93]

@jlgasparrini Then you have to initialize select2 in the ajax callback ;)