Capybara cannot find element by id
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 is trying to do
page.find('#filter-button').click
I get scary
Capybara::ElementNotFound:
Unable to find css "#filter-button"
If I put a breakpoint in the test, I can inspect the HTML and see that the element is present and I can interact with it.
(byebug) page.has_css?('#filter-button', visible: false)
false
Like
$('#filter-button')
Object { length: 1, context: HTMLDocument → moves, selector: "#filter-button", 1 more… }
I'm running out of ideas. The only thing I can think of is that this button is inside a container that is positioned via javascript after the page has loaded (just increasing the top CSS value), but even so I would think it would still be found on the page with visible: false / visible: all.
source to share
Make sure yours is click
not inside another block within
like:
within "#some_other_element" do
#lots of other checks...
page.find('#filter-button').click
end
I fell into this trap for a long time, especially within the framework of modals that are added to the document body (outside the original selector).
source to share
If you need to pass "visible: false" to any Capybara method to find an element, then the element is not actually displayed on the page. If it doesn't actually appear on the page, then the user won't be able to click on the element so that the click fails. The fact that your example page.has_css?('#filter-button', visible: false)
returns false
implies that the button is not on the current page at all (visible or not), so check the spelling of the identifier and / or check the actual html of the page via page.html
.
source to share