英文:
Cypress mouseenter event
问题
` <div class="level-0 flex-1 transition duration-500 group hover:bg-primary-darker" @mouseenter="hoverPanelActiveId = '41'" @mouseleave="hoverPanelActiveId = 0"> `
使用 Cypress 来定位上述导航菜单中的元素时，我无法触发 mouseenter 事件。鼠标悬停时，会在导航栏下方显示一个包含链接列表的面板。在浏览器中查看时，它会触发，但当我运行自动化测试时似乎没有任何反应。
我尝试过：
`.trigger('mouseenter') .trigger('mouseover') .invoke('show')`
以上解决方案都没有触发包含子导航菜单的额外面板。
有人能给我一些解决这个问题的方法吗？
谢谢
<details>
<summary>英文:</summary>
<div class="level-0 flex-1 transition duration-500 group hover:bg-primary-darker" @mouseenter="hoverPanelActiveId = '41'" @mouseleave="hoverPanelActiveId = 0">
When using cypress to target the above element in the nav menu i am unable to trigger the mouseenter event. On hover a panel appears with a list of links under the nav bar. While viewing in browser it will trigger but when i run a automated test nothing seems to happen
i have tried:
.trigger('mouseenter') .trigger('mouseover') .invoke('show')
None of the above solutions triggered the additional panel which contains the sub nav menu
[desired nav bar interaction][1]
could anyone give me some solutions to this problem?
Thanks
[1]: https://i.stack.imgur.com/VgygG.png
</details>
# 答案1
**得分**: 1
Cypress 本身不具备鼠标悬停命令。但有一些变通方法。
您的尝试可能不起作用，因为使用 `.trigger()` 只会影响 JavaScript 中的事件，不会触发 CSS 中的任何效果。
----------
如果在 `.invoke('show')` 后面添加 `.click({ force: true })`，可能会起作用。由于它跳过了所有检查，它将始终触发所需元素上的事件。
----------
您可以尝试使用 [ cypress-real-events ][1]。
通过将以下内容添加到您的 cypress/support/index.{js,ts} 文件中注册新命令：
```javascript
import "cypress-real-events/support";
然后在您的代码中，您可以直接编写：
cy.contains("a", "Custom").realHover('mouse')
英文:
Cypress natively doesn't have a hover command. But there are some workarounds.
Your attempts might not have worked because using .trigger() will only affect events in JavaScript and will not trigger any effects in CSS.
If you add a .click({ force: true }) behind .invoke('show') it might work. Since it skips all checks, it will always fire the event at the desired element.
You could try it with cypress-real-events
Register new commands by adding this to your cypress/support/index.{js,ts} file.
import "cypress-real-events/support";
And in your code, you can directly write:
cy.contains("a", "Custom").realHover('mouse')
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论