Capybara with Selenium: Can't click on hidden element

Question

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:

HTML

<div id="button_div">
   <i id="icon" data-bind="click: dosomething"></i>
</div>

SCSS

i {
  display: none;
}

#button_div:hover {
   i {
      display: block;
   }
}

Everything works fine on the page, but I can't seem to figure out how to click the element in Capybara. I've tried adding the :visible symbol to the method, but with no luck:

find('#icon', visible: false).click

This gives me the a "Selenium::WebDriver::Error::ElementNotVisibleError" error.

Using:

Capybara.ignore_hidden_elements = false

Gives me the exact same error

I've also tried using a Selenium Action such as:

button_div_element = find('#button_div').native
button_element = find('#button', visible: false).native
page.driver.browser.action.move_to(button_div_element).click(button_element).perform

While this doesn't throw an error, it also doesn't click the button.

Does anyone have any idea what I might be doing wrong?

Answer 1

Capybara is designed to emulate a user so you can't click on a non-visible element because a user couldn't. You should, however, be able to replicate a users actions to make the element visible and then click it

find('#button_div').hover
find('#icon').click

if that doesn't raise an error but also doesn't appear to click the button try putting a short sleep between the two actions since you may have an animated appearance which can cause clicks to miss items

Answer 2

Try using .execute_script() as below :-

button_div_element = find('#button_div').native
button_element = find('#button', visible: false).native
page.driver.browser.action.move_to(button_div_element).perform
page.driver.browser.execute_script("arguments[0].click()", button_element)

Hope it will work...:)

Answer 3

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:

page.driver.browser.manage.window.maximize

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.