Cypress is unable to simulate the hover state on HTML element using the trigger('mouseover') workaround

[miteshravindra]

• Operating System: Windows
• Cypress Version: "cypress": "2.1.0"
• Browser Version: Electron 59

Bug

Current behavior:

When trying to simulate hover using the trigger('mouseover') workaround mentioned in this link: https://docs.cypress.io/api/commands/hover.html# cypress does not simulate the hover action on the html element

Desired behavior:

Cypress should be able to simulate hover action on the element

How to reproduce:

Use the test code below to reproduce the issue.

Test code:

describe('Testing simulate hover state', () => {
    it('Simulates the hover action ', () => {
        cy.visit('https://www.w3schools.com/howto/howto_css_zoom_hover.asp');
        cy.get('div.zoom').trigger('mouseover');
    });
});

Additional Info (images, stack traces, etc)

[Konstruktour]

trigger('mouseover') is triggering the mouseover event listener, so if u would have a js function, this would be called... but it doesn't hover the element. the green box in your example reacts to a hover (css) not to a mouseover... you could add a ":hover" to the div.zoom element in cy test.

[miteshravindra]

@Konstruktour thank you for your response. By adding :hover to the test,do you mean using it in the cy.get() method?because I tried doing it and it doesnt work.Could you please clarify if I misunderstood.

[rvanmarkus]

+1

[jennifer-shehane]

What @Konstruktour is getting at is that Cypress does not trigger the CSS pseudo selectors in any current implementation of its hover workarounds.

If you have event listeners, in JavaScript, on mouse events - that will work, but something like the css zoom effect in the example will not work.

The full hover implementation (including reflecting css hover effects) is more fully outlined here and planned in the future. Currently css hover behavior does not work. Closing as duplicate.

[DavidGWheeler]

• "The full hover implementation (including reflecting css hover effects) is more fully outlined here and planned in the future. Currently css hover behavior does not work. Closing as duplicate."

Where is "here"??

[jennifer-shehane]

Sorry I forgot to link. Duplicate of https://github.com/cypress-io/cypress/issues/10