5

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?

6
  • Sometimes transitions found in modals or hide/unhide functions are a little slower to render. You may need to modify your select selector to wait until the #state_search is both visible & not disabled. You might be able to add a simple expect(page).to have_selector('#state_search', visible: true, disabled: false) assertion that will wait until it appears (inside your within, before your select)
    – Jay Dorsey
    Dec 7, 2018 at 2:41
  • @JayDorsey that doesn't change anything. And I still see the popup when capybara lunches chrome. So I do see that the dropdown is there. I even added a sleep for 20 seconds, but it still can't find it. Dec 7, 2018 at 2:48
  • I'd probably try throwing a binding.pry after the click_link and inspecting the page both manually (inside chrome) and via the console (by running find commands to look at elements, for example). The message you're seeing indicates to me that it's finding the element but one of the two conditions isn't being met. Bootstrap might have disabled the field for some reason. Is one of your describe/scenario blocks tagged with either :js, or js: true, or do you ahve this tagged as a feature spec (or in feature folder)?
    – Jay Dorsey
    Dec 7, 2018 at 3:00
  • 1
    @JayDorsey I have Capybara.current_driver = :selenium in background :context before the scenerio is run. Dec 7, 2018 at 3:02
  • I also added a screenshot to my question I took when Capybara and Selenium launched chrome to show that the element is there. Dec 7, 2018 at 3:06

3 Answers 3

2

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

select('Pennsylvania', from: ‘state_search')
7
  • 1
    You can find more information here rubydoc.info/github/jnicklas/capybara/Capybara/Node/… from (String) — The id, Capybara.test_id atrtribute, name or label of the select box
    – bott
    Dec 10, 2018 at 17:03
  • I'm certain I've never dug into the documentation for this, and used to using selectors (rather than text) so thank you for answering this. I'm pretty sure I've run into this before and my workaround was to grab the select box using some other handle/method, rather than realizing I had an extraneous #
    – Jay Dorsey
    Dec 10, 2018 at 17:23
  • @JayDorsey You're welcome - technically the :from option is used in a find call with the built-in select selector (find(:select, from, ...) which is why it takes the id/name/etc rather than a CSS selector. If you did want to use a CSS selector it would need to be something like find('#state_search').select('Pennsylvania') Dec 10, 2018 at 18:06
  • 2
    @JayDorsey The issue is that #state_search is actually a valid element id - <select id="#state_search" ... > so stripping isn't valid and warning would be wrong too. Dec 10, 2018 at 18:42
  • 2
    @JayDorsey I've managed to come up with something that adds a warning on failure to find - github.com/teamcapybara/capybara/pull/2143 - please leave thoughts/feedback on that PR if you have any Dec 13, 2018 at 18:29
2

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
1
  • visible: false works perfectly with select picker plugin. Thanks.
    – mahfuz
    Jun 9 at 18:01
1

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

1
  • 1
    bless you sir... weird how the documentation doesn't seem to mention this Dec 15, 2020 at 20:40

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.