Handle mouse hover events in cypress (invoke method) – Part 1

Tutorial 29​​ – Handle​​ mouse hover events​​ in cypress​​ (invoke method)​​ – Part 1 ​​​​ 

Launch​​ https://americangolf.co.uk​​ 

Simply hover over​​ the mouse over any menu item, notice that​​ it​​ will​​ show up​​ their sub-menus. So you can see below,​​ when you mouse hover ‘Golf Clubs’ menu, the sub-menus show up automatically.​​ 

Let us​​ now​​ launch the cypress documentation:​​ https://docs.cypress.io/api/commands/hover.html#Workarounds​​ 

If you see the highlighted text above, Cypress directly doesn’t support any mouse hover event​​ command.

Now, let’s say,​​ we​​ want to​​ click a sub-menu​​ ‘Drivers’ under ‘Golf Clubs’.​​ 

When we click ‘Drivers’ sub-menu, the below page comes up. Notice carefully the new url of this page. We would be verifying this later​​ as part of our assertion ​​​​ 

How​​ do​​ we handle this scenario in cypress?​​ 

Go to​​ https://www.w3schools.com/jquery/jquery_hide_show.asp​​ 

There is a show() method in jQuery, we can make use of this method to show the hidden HTML elements

We can use the cypress ‘invoke’ method to show the hidden element

So, let us​​ now​​ inspect​​ ‘Golf clubs’

We can create our custom xpath​​ for​​ ‘Golf Clubs’ element:​​ 

//a[@class='a-level-1'][contains(text(),'Golf Clubs')]

Notice that this xpath returns us only ‘1 element matching’, see below

So let us write the script​​ and invoke this element, see below

Save the script and run the script to see if we actually see the hidden sub-menu elements.​​ 

On the left hand side, just hover over the mouse over​​ .invoke​​ statement. You would see the ‘Golf Clubs’ element gets highlighted on the right hand side. However, to our surprise, the​​ ‘Golf Clubs’​​ sub-menus are hidden.​​ Also note that there is no error in the script.​​ 

This is quite really interesting.​​ So basically, the invoke(show) operation is successful, it’s just that the sub-menus are hidden. So how do we deal with this?

Let us try to click the ‘Drivers’ sub-menu (although we know that it is hidden and was not visible in the screen above)

Save the script and run. As expected, we get a cypress error, see below. It says that the element ‘Drivers’ is not visible. It also recommends us to use {force: true} click method​​ 

Comment below line

Let us​​ write line#11

Save the script and run

Notice below that script successfully clicks ‘Drivers’ sub-menu this time & the​​ URL​​ changes to​​ https://www.americangolf.co.uk/golf-clubs/drivers​​ 

Let us now validate if the url string contains ‘drivers’

Save the script and run. Notice below that assertion gets passed

So we are able to successfully hover over the mouse and click the hidden sub-menu.

Below is complete code

Let us try to click another​​ menu/sub-menu combination.​​ This time, let us hover over ‘GPS, Bags & Equipment’ menu and click the sub-menu ‘GPS watches’

Inspect ‘GPS, Bags & Equipment’ menu​​ and construct the line#8 seen below

Inspect ‘GPS watches’ sub-menu and construct the line#10

See the code below

Change line#11 to include ‘watches’ in the url this time.

Save the script and run. Notice below that the assertion gets passed and we are able to successfully hover over the menu and click the hidden sub-menu

So, this is how we perform the mouse hover.

Below is the complete code

Thank you for reading!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024