Search code examples
cypressmouseover

Mouseover in cypress

I am a newbie in cypress and trying to create some basic scripts for my learning, Handling dropdown by clicking the elements is fine, but hovering on the element is not working in this case, I can see the required element is getting hovered but the sub-menu is not appearing.

it.only('Mouse hover using trigger ', () => {
        cy.visit('https://www.puregrips.com/pages/custom-grips')

        cy.contains("a", "Custom").trigger('mouseover')

    })
Solution

  • You can use the cypress-real-events plugin and this worked with your webpage.

    To install use the command:

    npm i cypress-real-events

    Then inside your cypress/support/index.{js,ts}, write:

    import "cypress-real-events/support";

    And in your code you can directly write:

    cy.contains("a", "Custom").realHover('mouse')

    Test runner screenshot for the test

    Note: Since the above plugin uses Chrome DevTools Protocols to simulate native events, hence this will only work with Chromium-based browsers, so no firefox.

    Things I tried that didn't work -

    cy.contains("a", "Custom").trigger('mouseover')
cy.contains("a", "Custom").invoke('show')