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!