Capybara can't find element by id

Question

I have the following code on my page:

<div class="row column filter-tab">
  <div id="filter-button" class="button"><%= fa_icon 'filter' %></div>
</div>

I have an rspec test that tries to do

page.find('#filter-button').click

I am receiving the dreaded

 Capybara::ElementNotFound:
   Unable to find css "#filter-button"

If I put a breakpoint in the test, I can inspect the HTML and see the element is present, and I am able to interact with it.

(byebug) page.has_css?('#filter-button', visible: false)
    false

As well as

$('#filter-button')
Object { length: 1, context: HTMLDocument → moves, selector: "#filter-button", 1 more… }

I am starting to run out of ideas. The only thing I can think of, is that this button is inside a container that is positioned via javascript after page load (just by augmenting the top CSS value) - but even so, I would think it would still be able to be found on the page then with visible: false/visible :all.

Answer 1

Check that your click isn't inside of another within block like:

within "#some_other_element" do
  #lots of other checks...
  page.find('#filter-button').click
end

I have fallen into that trap a lot before, particularly within modals that are appended to the body of the document (outside the the original selector).