Capybara selenium driver, hovering an element

Question

The app I'm testing has some elements hidden initially. They will display via CSS when hovering over a separate element:

Click to copy

.thread_options{
  display: none;
}
.btn_thread_options:hover .thread_options{
  display: inline;
}

When you hover over the .btn_thread_options element, some links are displayed that I want Capybara to click on. Attempting to click these without doing anything using click_link "Send Response" gives me the error:

Click to copy

Failure/Error: click_link("Send Response")
Selenium::WebDriver::Error::ElementNotVisibleError:
  Element is not currently visible and so may not be interacted with

Trying to use other ways of clicking it like

Click to copy

page.execute_script("$('.btn_thread_options').trigger('mouseover')")

Doesn't work either (same result).

Nor does clicking the item first to try to force it to be moused over:

Click to copy

page.find(".btn_thread_options").click

Is there any way to get this to work correctly?

Answer 1

This has been added to Capybara:

Click to copy

find(:css, "#menu").hover

Answer 2

You could try displaying the element directly rather than mousing over.

Click to copy

page.execute_script("$('.thread_options').css('display','inline')")

Maybe also investigate the setting of ignore_hidden_elements. It defaults to false, but perhaps you have it set to true.

Or instead of display none, set the margin to a large negative value.

Click to copy

/* Move the element off the screen */
.thread_options{
  margin: -9999px 0 -9999px 0;
}
/* Set the desired display margins
.btn_thread_options:hover .thread_options{
  margin: 10px 0 10px 0;
}