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')
})
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')
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')
Just try this, it should work:
cy.get('.locater').invoke('show').click({ force: true })
cy.get('[your selector]')
.eq(0).invoke('show')
.trigger('mouseenter')
.wait(1000)
.should('have.attr','your-selector','Active tooltip')
.trigger('mouseleave');