How can I hover over an element then click

Question

I want to hover over the "My Account" button and the click the "Login" button opened popup. I have tried the below code but it did not work. Does anyone know a way to handle this situation?

Cypress.Commands.add('loginol', (email, password) => { 
    cy.get('#myAccount').click()
    cy.get('#myAccount').trigger('mouseover')
    cy.wait(3000)
    cy.get('#login').click()
    cy.get('#email').type(email)
    cy.get('#password').type(password)
    cy.get('.btn.full.btn-login-submit').click()
})

I have uploaded the pictures in case it helps:

"Giriş Yap (My Account)" Button

After it is hovered below "Giriş Yap (Login)" Button

Website I'm working on: https://www.hepsiburada.com/

Answer 1

You don't have unique id's, assign unique id's to your elements

From the source code of your website:

So what happens is you are triggering the mouseover on the widget, the first myAccount item, the widget container. On this item you don't have any events bound, they are bound on the second item tagged with id="myAccount"

ID needs to be unique

To resolve make the id of your button something like id="myAccount_button" and target that in your test script.

Below is a snippet that simulates your website. It doesn't show the menu.

$('#myAccount').trigger('onmouseover');

#menu {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myAccount">
  <div id="myAccount" onmouseover="$('#menu').show()" onmouseout="$('#menu').hide()">
     my account
  </div>
</div>
<div id="menu">
a<BR/>
c<BR/>
d<BR/>
e<BR/>
</div>

This is the snippet with the fix. As you can see, the menu shows here, because the ID is unique and can be targeted.

$('#myAccount_button').trigger('onmouseover');

#menu {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myAccount_wrap">
  <div id="myAccount_button" onmouseover="$('#menu').show()" onmouseout="$('#menu').hide()">
     my account
  </div>
</div>
<div id="menu">
a<BR/>
c<BR/>
d<BR/>
e<BR/>
</div>

Answer 2

//cypress doesn't know how to hover so 'invoke' call JQuery 'show' method which force menu to become visible

cy.get('#myAccount').invoke('show');

that worked for me.

Answer 3

For a workaround and from the official cypress website they're mentioning cypress-real-events plugin which can be helpful for a real events that require event.isTrusted to be true, it provide hover and more real events, so you can use it as a real user and test your elements such as a tool-tip messages, expendable lists,... etc.

Note: for current time it support only chromium's based web browsers