javascript - Cypress 调用不执行隐藏元素交互的 "show"方法

Question

我有一种情况，我想打开主菜单的子子菜单，该子菜单具有使用嵌套“ul-li”构建的布局。

当鼠标悬停在有 child (ul-li) 的 li 上时，子菜单打开，如下所示

<ul class="dropdown"> 
  <li>/<li>
  <li>/<li>
  <li class="dropdown-menu">
      <a> Target Menu </a>
      <ul class="dropdown"> 
        <li class="dropdown-sub-menu"><a> Sub Menu 1</a></li>
        <li class="dropdown-sub-menu"><a> Sub Menu 2</a></li>
       <li class="dropdown-sub-menu"> <a> Sub Menu 3</a></li>
     </ul>
  </<li>
</ul>

在这里，我的要求是将鼠标悬停在“目标菜单”上，这将打开其子菜单，然后分别触发“子菜单 1/2/3”的单击事件。

我已经阅读了 cypress 的文档来处理这个特性。由于 .hover() 功能不适用于 Cypress 。

https://docs.cypress.io/api/commands/hover.html# https://docs.cypress.io/api/commands/trigger.html#Syntax https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Actionability

我也试过下面的命令，但也失败了。没有任何悬停或鼠标悬停效果发生，因此当它尝试单击“隐藏的 Li(子菜单 1/2/3)”时，自动化会中断。

cy.get("target the li/a").trigger("mouseover")

其中一个博客在搜索时我发现要与隐藏元素交互，这些隐藏元素在鼠标悬停在某些按钮或链接上时变得可见，您必须使用如下的 cy.invoke 来执行 jquery“show”事件和使隐藏的元素可见，然后您可以单击隐藏的元素。不幸的是，当我编写以下命令时，该方法也无法像在 Typescript 中那样工作，它不允许我编译，因为“show”不是有效的函数名称。

cy.get("li.dropdown-menu ul.dropdown").invoke("show")

请指导与此相关的可能解决方案。使用隐藏元素的 {force: true } 执行点击命令是解决此问题的方法，但不是有效的方法。

Answer 1

friend

首先，感谢您的宝贵时间和建议。

我找到了触发鼠标悬停事件并显示 Bootstrap 子菜单的解决方法。不使用 {force: true }。

我实现的解决方案。如果有人找到不同的更好的解决方案，我们将不胜感激。请分享。

Cypress.$($elem[0]).siblings("ul").show();

使用这个我手动让 ul 先显示然后执行子菜单的点击事件。为此我尝试过

Cypress.$($elem[0]).hover(false, false);
Cypress.$($elem[0]).mouseover();
Cypress.$($elem[0]).trigger("hover");
Cypress.$($elem[0]).trigger("mouseover");

但上面的命令不起作用。所以我转向手动触发jquery的隐藏/显示事件。