Capybara/cucumber css mouseover and click on elements displayed on hover event

Question

I am a newbie in using cucumber with capybara. I need to click on links displayed after hovering over certain elements of the web page using capybara

e.g. att.com

1. scenario is on hovering over Personal click on att.com

2. another scenario on hover over Shop --Bundles - click on Popular Bundles

How can this be accomplished using hover and click methods of capybara or is there any other method to make this work.

Option tried are

  find(:xpath, ".//*[@id='ge5p_z2_p1001']").hover
  find(:xpath, ".//*[@id='ge5p_z2_t1038']").click

But it complains unable to find xpath

Answer 1

Well there are two options here, dependent upon what your testing

1) If you want to test that the hover event triggers and then the links are clickable then try

find('.ge5p_z1-drop-down').hover
expect(page).to have_selector('.ge5p_z1-menu', visible: true) # check that menu is shown (need to have rspec for this)
click_link('att.com')

2) If you just want to test that the dropdown links take you to the correct page then treat them as links

click_link('att.com', visible: false) # this is hidden by default

let me know how you get on with this, I haven't tested it yet but should sort you out

Answer 2

I had a problem to click on a button that only appear when the mouse was positioned on a picture (photo) and after much research got this:

find('#follow', visible: false).trigger(:click)

In my case, the button was a link and only this way i can make my tests pass.