nmg49 nmg49 - 4 months ago 61
Ruby Question

Capybara with Selenium: Can't click on hidden element

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

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.