How to emulate mouse hover with Capybara

Question

Basically, what I'm trying to do is click on a button that becomes visible when hovering another element (its parent).

I have tried to use trigger.('mouseover') on the parent of the hidden button, but that doesn't seem to work.

Here's a code snippet from the spec:

 # label[for ... ] -> the parent element
 page.execute_script("$('label[for=\"department_#{department.id}\"]').trigger(\"mouseover\")")     
 # le hidden button
 find(".actions").click     
 # some <li> on a list that drops down when clicking the hidden button    
 click_on("Edit department")

And the error ...

 Failure/Error: click_on("Edit department")
 Selenium::WebDriver::Error::ElementNotVisibleError:
 Element is not currently visible and so may not be interacted with

I would like to know how can I make the .actions button visible on the page, in order to click it afterwards.

Any help would be much appreciated.

Andrei Botalov · Accepted Answer · 2013-06-15T19:55:51.427

122

Capybara provides Element#hover method from version 2.1:

find('.some_class').hover

This method is implemented in Capybara::Selenium::Driver in almost the same way as in @AlexD's answer.

Note that to use #hover in Selenium it's usually better to turn native events on:

Capybara.register_driver :selenium do |app|
  profile = Selenium::WebDriver::Firefox::Profile.new
  profile.native_events = true
  Capybara::Selenium::Driver.new(app, :browser => :firefox, profile: profile)
end

edited Jun 15 '13 at 19:55

answered May 16 '13 at 07:12

Andrei Botalov

20,686
11
89
123

Why is this not the top answer? – manu Jul 04 '14 at 11:25
OP (Original poster) got his answer a year earlier and accepted it. Time has moved on, and this answer is now better, but OP needs to select it to move it to the top. – Affable Geek Jul 10 '14 at 13:53
Confirmed that find('.some_class').hover works. Then for my case, it allowed me to click a link that was only visible on hover by placing that code afterwards. I didn't have to drop down to native events (I also like to switch between Selenium and Capybara Webkit to either see whats happening or for speed) – Greg Blass Mar 22 '16 at 20:41

Said Kaldybaev · Answer 2 · 2013-03-13T10:44:38.580

19

Alex described the solution of such problems in his blog: check it out http://aokolish.me/blog/2012/01/22/testing-hover-events-with-capybara

RSpec.configure do |config|
  # ...
  Capybara.javascript_driver = :webkit
end

page.find('#element').trigger(:mouseover)

edited Mar 13 '13 at 10:44

answered Mar 20 '12 at 09:45

Said Kaldybaev

9,380
8
36
53

3

How do I overcome the `Capybara::NotSupportedByDriverError` error? – Hengjie Mar 13 '13 at 10:19
3

@Hengjie `page.execute_script('$("#element").trigger("mouseenter")')` – Andrew Mar 25 '13 at 05:35
1

Make sure to scroll down to see the newer and IMHO better answer: http://stackoverflow.com/a/16581158/199712 – Jason Swett Feb 10 '14 at 00:31

score 7 · Answer 3 · answered Dec 24 '12 at 17:09

7

I found a way to simulate "mouse hover" using Capybara + the Selenium driver:

module Capybara
  module Node
    class Element
      def hover
        @session.driver.browser.action.move_to(self.native).perform
      end
    end
  end
end

answered Dec 24 '12 at 17:09

Alex D

29,755
7
80
126

Where do you place this file? – Hengjie Mar 13 '13 at 10:19
1

If you have a common `spec_helper.rb` or `test_helper.rb` or something similar which is shared by all your test files, you can put it there. – Alex D Mar 14 '13 at 08:20

score 5 · Answer 4 · answered Jan 31 '14 at 11:46

5

Using Capybara + Selenium it is possible to use "hover" with this command:

page.driver.browser.action.move_to(page.find('YourElement').native).perform

answered Jan 31 '14 at 11:46

tuhaj

527
7
9

How to emulate mouse hover with Capybara

4 Answers4

Linked