8

I wonder if it's possible to test coverable dropdown menu bar using Cypress.

For example, when you go to Ebay(https://www.ebay.com), you'll see the alert icon at the top-right corner of the page and if you hover on that element, sign-in notification box will show up.

Here is my code and I followed what Cypress told me to do but I got an error like...

AssertionError Timed out retrying: Expected to find element: #ghn-err, but never found it.

 it('ebay hover test', () => {
        cy.visit('https://www.ebay.com')
        // 1. alert icon hover test.
        cy.get('#gh-Alerts-i').trigger('mouseover')
        cy.get('#ghn-err').should('be.visible')
        // 2. This is my another test.
        // cy.get('#gh-eb-My > .gh-menu > .gh-eb-li-a > .gh-sprRetina').trigger('mouseover')
        //cy.get('#gh-eb-My-o > .gh-eb-oa thrd').should('be.visible')
    })
bad_coder
  • 11,289
  • 20
  • 44
  • 72
loone96
  • 723
  • 2
  • 13
  • 21
  • 1
    Have you already read this cypress page? https://docs.cypress.io/api/commands/hover.html#Workarounds and https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/testing-dom__hover-hidden-elements/cypress/integration/hover-hidden-elements-spec.js – DarkMikey Jul 30 '20 at 13:26
  • I have also tried the methods given in above link but hovering not happening . Alternatively using cy.get('#gh-Alerts-i').click() or cy.get('#gh-Alerts-i').type('xyz') solved my purpose to assert signin link but to check if hovering works is still not solved . Following this thread – Karan Jul 30 '20 at 15:20
  • 1
    I'd similar problem - in my case, none of the mouse trigger events worked except `mouseenter`. The best way (imo) to identify which one works is, looking at the AUT's source code and use the same. – Dhamo Jun 16 '21 at 11:28

3 Answers3

11

For me mouseover works. It's a known Cypress bug pending to be solved. However, try these:

cy.get('#gh-Alerts-i').trigger('onmouseover')
cy.get('#gh-Alerts-i').trigger('mouseenter')
cy.get('#gh-Alerts-i').invoke('trigger', 'contextmenu')
cy.get('#gh-Alerts-i').rightclick();
Pedro Bezanilla
  • 1,167
  • 14
  • 22
6

I had the same problem, I finally found this plugin that does exactly what I was looking for: do real events instead of simulated ones (simulated == launched with javascript).

https://github.com/dmtrKovalenko/cypress-real-events#cyrealhover

Just install it, add a line to cypress/support/index.js file (do not forget! See 'install' paragraph at the top of the page) and use cy.get(<element>).realHover().

Don Diego
  • 1,309
  • 3
  • 23
  • 46
1

If .trigger() does not work for you, it could also be that your display logic is controlled via CSS instead (for example with .class:hover). You could then rework the display logic to toggle a class with mouseenter and mouseleave events instead.

kano
  • 5,626
  • 3
  • 33
  • 48