Mouseover doesn't work as on the user behavior

[learningandworking]

Current behavior:

There is no action "hover" on the selected menu although the code ran well.

Desired behavior:

Trigger('mouseover') should work as real user behavior.

Procedure:

1. Access to page 'http://automationpractice.com/index.php'
2. Hover on "Women", wait a little bit to see the content.

Steps to reproduce: (app code and test code)

     context('automationpractice', () => {
      beforeEach(() => {
        cy.visit('http://automationpractice.com/index.php')
        cy.title().should('eq', 'My Store')
      })

      it.only('Hover on Categories: Women', () => {
        cy.get('.sf-menu > :nth-child(1)')
          .trigger('mousemove')

      })
    })

Versions

Node: v9.3.0
"cypress": "^3.1.5",

[jennifer-shehane]

Looking at the event handlers on the menu item, I can see the code in your application is listening for these mouse events, but it's listening from within this plugin called hoverIntent.

From hoverIntent:

hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method. However, instead of calling the handlerIn function immediately, hoverIntent waits until the user's mouse slows down enough before making the call.

Since this plugin is listening for constant mouse movements, simply calling the event once will not end up causing the code in your app to register as a 'hover'.

It may be possible to trigger a bunch more events to mimic user behavior? But, if I were in your situation, knowing that this plugin is in effect, I would likely just trigger the effects of the hover manually. Like, within Cypress tests just add the class onto the menu item or the display: block onto the menu dropdown so I could move on with testing.

[learningandworking]

Thanks @jennifer-shehane for your explanation

Simulate the real "hover" action for my application successfully by calling invoke('show')

BR,