[解決済み] Cypress を使用して、要素にカーソルを合わせてからクリックするにはどうすればよいですか？

質問内容

マイアカウント」ボタンにカーソルを合わせ、「ログイン」ボタンをクリックすると、ポップアップが表示されるようにしたいのですが、どうすればいいですか？以下のコードを試しましたが、うまくいきませんでした。どなたかこの状況を処理する方法をご存知でしょうか？ありがとうございます。

 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()

 })

参考になればと思い、写真をアップしました。

ギリス・ヤップ（マイアカウント）" ボタン

ギリシアップ(ログイン)ボタンの下にカーソルを置くと、次のようになります。

私が担当しているウェブサイト https://www.hepsiburada.com/

解決方法は？

ユニークIDがない場合、要素にユニークIDを付与してください。

ウェブサイトのソースコードから

つまり、ウィジェット、最初の myAccount アイテム、ウィジェットコンテナでマウスオーバーをトリガーしているわけです。このアイテムにはイベントがバインドされておらず、次のタグが付けられた 2 番目のアイテムにバインドされています。 id="myAccount"

IDは一意である必要があります

解決するには、ボタンのIDを次のようにします。 id="myAccount_button" を作成し、テストスクリプトでそれをターゲットにします。

以下は、あなたのウェブサイトをシミュレートしたスニペットです。メニューは表示されません。

$('#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>

これが修正したスニペットです。ご覧の通り、IDがユニークでターゲットにできるため、ここにメニューが表示されます。

$('#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>