Tutorial 30 – Handle mouse hover events in cypress – Part 2
What you will Learn :
Handle mouse hover events in cypress using trigger method
it.skip to skip a test
.first().click() to click first occurrence of an element on a webpage
Handle mouse hover events in cypress using trigger method
In the previous tutorial, we saw mouse hover using ‘invoke’ method. In this tutorial we would learn about how to mouse hover using ‘trigger’ method.
Launch https://www.spicejet.com/
Hover the mouse over LOGIN/SIGNUP. It will show up first child sub-menu
Now, hover the mouse over ‘SpiceClub Members’. It will show up second child sub-menus ‘Member Login’ and ‘Sign up’
Let us now launch the cypress documentation: https://docs.cypress.io/api/commands/hover.html#Workarounds
Just read about the ‘trigger’ method
So basically, we can use trigger(‘mouseover’) method to simulate mouse hover operation.
Let us inspect ‘LOGIN / SIGNUP’
Notice below that it is represented by anchor tag ‘a’
Now, expand this anchor tag, you would see that it contains ‘Login / Signup’
So we can identify this element using cy.contains(‘Login / Signup’) and tcan then fire the trigger(‘mouseover’) method
Save the script and run. Notice below that the mouse hover happens and the first level of sub-menus become visible
Next let us inspect ‘SpiceClub Members’
Expand the anchor tag
So we have
Save the script and run. Notice below that the mouse hover happens and the second level of sub-menus also become visible
Next let us inspect ‘Sign up’
So again it is an anchor tag
So we have to perform the click operation this time on ‘Sign up’ link
Save the script and run. Notice below that the registration page opens up and the url changes
This time let us inspect ‘Member Login’
It is represented by anchor tag
So we have
Save the script and run. Notice below that the login page opens up and the url changes
We will now see one more scenario in another ecommerce practice website.
Launch http://automationpractice.com/index.php
As of now, if you see, the cart is empty since we haven’t added any product to the cart
Scroll slightly to the page bottom, you would see some products
Hover the mouse over the price, you would see ‘Add to cart’ button
Click ‘Add to cart’, you would see a popup
Click the cross button 
You would see 1 product in the cart
Next, mouse hover the Cart, you would see a pull down section showing ‘Check out’
Click ‘Check out’, the below page comes up http://automationpractice.com/index.php?controller=order
So we will be automating this end to end scenario.
First let us skip the 2 test cases using it.skip
Next, we will create an ‘it’ block and launch our website
Let us inspect ‘Add to cart’
So we can use the class
However when we search for this css selector, we see that there are 14 elements that match this property
We would like to click the first matching element, to do that we can use .first() method, see below
Next inspect cross 
So we have
Next inspect the ‘Cart’
We can use ‘title attribute’ and trigger the mouse hover on to it
Next inspect ‘Check out’
We can use the ‘id’
So we have
Next, when we click ‘Check out’, the below page comes up http://automationpractice.com/index.php?controller=order
So we will assert the url
So our test case is:
Save and run the script
See below, our assertion gets passed
Lastly, let us try to see how to do that using invoke(show) method, instead of trigger(mouseover).
Comment
The logic that we are going to implement is, we will fire the invoke method if the pull down menu is hidden. Let us inspect the pull down
So we can use the class
So we have
Save and run the script
See below, our assertion gets passed
Thank you for reading!