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:
Why can't Capybara find the element which I see it on the screen after it clicks the link?
select
selector to wait until the#state_search
is both visible & not disabled. You might be able to add a simpleexpect(page).to have_selector('#state_search', visible: true, disabled: false)
assertion that will wait until it appears (inside your within, before your select)binding.pry
after theclick_link
and inspecting the page both manually (inside chrome) and via the console (by runningfind
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
, orjs: true
, or do you ahve this tagged as afeature
spec (or infeature
folder)?