Feature request: CSS hover

[jamesarosen]

I cannot find a way to trigger a CSS hover event. That is, if a menu shows on hover, there's no way to click the items in that menu.

I've found #116, but that seems to be about a (nonexistent) JavaScript hover event. The suggestion -- to use a mouseover event -- works great for JavaScript event handlers, but not :hover CSS styling.

The Poltergeist driver folks think that there's merit to this, but they want to hear guidance from this project.

[szimek]

I have exactly the same problem with CSS menus using :hover to show DOM elements.

[joliss]

I think this will be tricky to get into the Capybara API, since it's not
supported in Selenium.

What I personally tend to do is something along the lines of

page.execute_script("$('.element-that-would-be-shown-on-hover').css('display',
'block')")

So far it works well enough.

[jonleighton]

@joliss is the policy that all parts of the capybara api must be supported by selenium?

[joliss]

I don't think there is a policy per se, but so far we've tried to only add features if we can reasonably expect them to be supported across drivers (minus RackTest). Selenium is Capybara's primary JS driver at the moment, so that's what I'd look at primarily.

Asking whether Selenium supports something is certainly a way to avoid features creeping in that turn out to be a pain to support cross-driver.

[jonleighton]

@joliss I guess I disagree. There are already differences between what drivers support, and this seems fine to me so long as it's clear to the user that their driver does/doesn't support something.

What seems more problematic is divergence between drivers. For example, capybara-webkit and poltergeist support several of the same things. Let's take resizing the window as an example. In capybara-webkit this is page.driver.resize_window(x, y) and in poltergeist it's page.driver.resize(x, y). This means that if a user wants to switch from one to the other they have to change their code. Now I don't know if selenium does or doesn't support resizing the window, but supposing it doesn't I think there's still a lot of value in the capybara project deciding what the blessed API is, because then all the drivers that support that feature can implement it using the same API, increasing portability.

I have a rule that I won't allow Capybara to be monkey-patched in Poltergeist. This gives some indication to users about whether something is non-standard. So basically all non-standard stuff must be on page.driver rather than page (or a node).

So assuming Capybara doesn't standardise this feature, the only way to support it in poltergeist will be:

page.driver.hover(page.find('#foo'))

Which seems kind of a shame, really.

[jnicklas]

I'm okay with adding features to Capybara which are not supported by Selenium. But in that case I would like to have tests for it within Capybara itself. Obviously they wouldn't run for any of the bundled drivers, but at least it would be specified. So if someone can provide a pull request for hover for example, which they have run against some driver, then I would be okay with adding that.

[BartlomiejSkwira]

Hey just wondering has anybody found a way to do a CSS hover using capybara (or poltergeist/phantomjs)?

[hubertlepicki]

I think the problem is broader than hovering over an element. In the app that we are working on, we need to do that, move mouse to given coordinates on the page, resize the window, change scroll position... probably not a daily requirement for some, but currently using driver-specific features or injecting JavaScript to make stuff happen.

Even if not day-to-day feature for most projects, it is not uncommon that you have to make your JS aware of stuff like cursor position, window size, scrollTop etc. Maybe you would consider adding just the nice API to Capybara itself, so the drivers can catch up and implement it independently.

I would suggest "try our best" approach, with API similar to:

# Move cursor to the centre of given element, if supported by driver.
# Maybe leave some trail by triggering appropriate events along the way on elements between.
# If not, trigger mouseenter / mouseover / whatever driver can do,
# or raise appropriate exception that driver does not support hovering. 
page.hover("#css_selector")

# Move cursor to given position specified in pixels
page.cursor.move(x, y)

# Resize window, changing scroll coordinates. Maybe leave trail by moving scrollbars in steps.
page.window.resize(width, height, scrollTop = nil, scrollLeft = nil)

Maybe cursor and window objects would also have getters to find out current orientation, current cursor style, current window dimensions and scroll offsets - that would be useful for acceptance testing stuff like scrolling to given element or seeing if element behaves like a link, while being for example a span (cursor change).

I probably can provide a pull request with stubs for such functionality, that then can be used by drivers to implement Capybara-compatible APIs.

[abotalov]

@joliss wrote "I think this will be tricky to get into the Capybara API, since it's not supported in Selenium."

Why don't you like Selenium's move_to?

[jnicklas]

Go, go @twalpole!