赛普拉斯调用不执行隐藏元素交互的 "show" 方法

Question

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

当鼠标悬停在有子项 (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>

这里，我的要求是鼠标移到"Target Menu"会打开它的子菜单，然后分别触发"Sub Menu 1/2/3"的点击事件。

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

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

我也试过下面的命令，但也失败了。没有任何悬停或鼠标悬停效果发生，因此当它尝试单击 "hidden Li (sub Menu 1/2/3)".

时自动化会中断

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

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

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

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

Answer 1

根据评论，您的问题似乎与 Bootstrap 中菜单的处理方式有关。

Bootstrap 菜单可以通过添加到 jQuery 的特殊 .dropdown() 功能来触发。由于 Cypress 为您提供了对 DOM 的本机访问，您只需在测试中调用该函数即可。这是在赛普拉斯中的样子：

cy.get('li.dropdown-menu a').then((elem) => {
    $(elem).dropdown('toggle');
});

Answer 2

好友

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

我找到了触发鼠标悬停事件并显示 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 的 hide/show 事件。

Answer 3

隐藏元素不会通过 invoke('show') 显示，因为您使用的是隐藏元素的祖父元素的定位器。尝试使用隐藏元素的直接父级。然后 invoke('show') 将执行鼠标悬停功能。

赛普拉斯调用不执行隐藏元素交互的 "show" 方法

Cypress invoke doesn't execute the "show" method for hidden elements interaction

javascript

jquery

typescript

automation

cypress