如何将鼠标悬停在元素上然后单击

Question

我想将鼠标悬停在“我的帐户”按钮上，然后单击“登录”按钮打开弹出窗口。我已经尝试过下面的代码，但它不起作用。有谁知道处理这种情况的方法？

\n

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

\n

我已经上传了图片，以防有帮助：

\n

“Giri\xc5\x9f Yap（我的帐户）”按钮\n

\n

将其悬停在“Giri\xc5\x9f Yap（登录）”按钮下方后\n

\n

我正在开发的网站： https: //www.hepsiburada.com/

\n

Answer 1

//cypress 不知道如何悬停，因此“调用”调用 JQuery“show”方法，强制菜单变得可见

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

这对我有用。

Answer 2

您没有唯一的 id，请为您的元素分配唯一的 id

从您网站的源代码：

因此，您将鼠标悬停在小部件、第一个 myAccount 项目、小部件容器上，会发生什么情况。在此项目上，您没有绑定任何事件，它们绑定在标记为的第二个项目上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>