I have a situation in my view where a clickable icon is only visible when it's containing div is hovered over (using Knockout JS, SCSS) . Something like this:
<i id="icon" data-bind="click: dosomething"></i>
find('#icon', visible: false).click
Capybara.ignore_hidden_elements = false
button_div_element = find('#button_div').native
button_element = find('#button', visible: false).native
After some painstaking trial and error, I managed to find a solution that worked
button_div = find("#button_div_id").native icon = find("#icon_id").native page.driver.browser.action.move_to(button_div, :right_by => -50).click.perform icon.click
Not sure why I had to manually tell Capybara to go left by 50px, but that seems to have done the trick.
Also, I added the following line to my setup code:
This makes sure the window is maximized before running the test. I'm not 100% sure, but this might have also had something to do with the fix.