Capybara RSpec Not Finding and Clicking CSS Element

Question

I am writing a test suite for a Rails code base of mine and am trying to click on a search icon using Capybara and check if the search field appears. However, the test keeps failing as Capybara cannot find the CSS element "search_icon". I have tried using click_on() and find(CSS).click, but neither work. The former returns the error

1) Contents search clicking magnifying glass makes search box appear Failure/Error: click_on('search_icon') Capybara::ElementNotFound: Unable to find link or button "search_icon" # ./spec/features/contents/contents_search_spec.rb:13:in `block (2 levels) in '

and the latter returns

1) Contents search clicking magnifying glass makes search box appear Failure/Error: find('#search_icon').click Capybara::ElementNotFound: Unable to find css "#search_icon" # ./spec/features/contents/contents_search_spec.rb:13:in `block (2 levels) in '

This is the RSpec desription

scenario "clicking magnifying glass makes search box appear" do
  visit contents_path

  find("#search_icon").click

  #Also tried this:
  #click_on('search_icon')

  expect(find("#search-form").visible?).to be true
end

that attempts to find this element

<div class="pull-right has-tooltip" data-title="Search" id="search_icon" data-original-title="" title="">

<i class="glyphicons-icon search"></i>

</div>

Is there an issue with my RSpec scenario code or how else could I find and click on this element?

On a side note, any time I have something to click, I find it best to make it a button or link. You may want to make the div an a element, with the href='#'. That way, you can click on the link itself, while the icon is seen as a label, in a way — onebree
All of the solutions have made my code better and more readable, though turns out not the entire issue. Apparently the team changed 'contents_path', causing it to load an error page. One I changed it to the correct path, the current statement worked fine. — Max

Thomas Walpole Thomas Walpole · Accepted Answer · 2015-07-17T17:30:12

#click_on is an alias for #click_link_or_button which will only click <a href=...> or <button> elements. Your usage of #find and #click is the correct way to be doing this, however depending on the css you're applying to the actual icon its possible the div actually has a width and/or height of 0px - which will make it unclickable. Instead try clicking on the actual icon using something like

find('#search_icon .search').click

also -- your expectation at the end will read better if you use the capybara rspec matchers

expect(page).to have_css('#search_form', visible: true)

the visible: true is only needed if you have changed Capybaras default of only finding visible elements

Capybara RSpec Not Finding and Clicking CSS Element

1 Answers