Daniel Viglione
Daniel Viglione

Reputation: 9407

Capybara::ElementNotFound: Unable to find visible select box

I have a simple bootstrap modal with displays a form with dropdown menu and submit button when a user clicks on a link. I try to select options from the dropdown menu with Capybara in an Rspec feature test, but it does not find the dropdown menu.

The feature spec:

scenario "User searches records" do
    visit my_records_path

    click_link 'Search Records'

    within('#practiceSearchModal') do
      select('Pennsylvania', from: '#state_search')
      click_on('Submit')
    end
end

The modal on the page:

<div class="modal fade in" id="practiceSearchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"><div class="modal-backdrop fade in" style="height: 654px;"></div>
  <div class="modal-dialog" style="width: 750px;">
    <div class="modal-content">

      <select name="state" id="state_search" class="form-control">
        <option value="">Select</option>
         <option value="Pennsylvania">Pennsylvania</option>
        <option value="New York">New York</option>
      </select>



    </div>
  </div>
</div>

This is error I get with Capybara, it cannot find the select menu with id state_search:

 Capybara::ElementNotFound:
   Unable to find visible select box "#state_search" that is not disabled within #<Capybara::Node::Element tag="div" path="/html/body/div[1]/div[2]/div[4]/div[1]/div[2]/div/div[1]/form/div">
 # /home/myuser/.rvm/gems/ruby-2.1.7@core/gems/capybara-2.18.0/lib/capybara/node/finders.rb:314:in `block in synced_resolve'

But I see the element on the page:

enter image description here

Why can't Capybara find the element which I see it on the screen after it clicks the link?

Upvotes: 5

Views: 5378

Answers (3)

Suman Tiwari
Suman Tiwari

Reputation: 31

Try this:

find("#state_search", visible: false).find("option[value='Pennsylvania']").click

Or within scope as:

within '#state_search', visible: false do
    find("option[value='Pennsylvania']").click
end

Upvotes: 2

Hank Phung
Hank Phung

Reputation: 2149

Sometimes some js plugins may add visible: hidden onto your select box. You can add the option visible: :all to your select to help.

Upvotes: 1

Thomas Walpole
Thomas Walpole

Reputation: 49880

The from option takes the id, not a CSS selector -

select('Pennsylvania', from: ‘state_search')

Upvotes: 2

Related Questions