赛普拉斯调用不执行隐藏元素交互的“显示”方法答案

【问题标题】：Cypress invoke doesn't execute the "show" method for hidden elements interaction赛普拉斯调用不执行隐藏元素交互的“显示”方法
【发布时间】：2018-12-24 18:51:55
【问题描述】：

我有一种情况，我想打开使用嵌套“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>

在这里，我的要求是将鼠标悬停在“目标菜单”上，它将打开其子菜单，然后分别触发“子菜单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 } 执行点击命令是解决此问题的方法，但不是有效的。

【问题讨论】：

如果您不喜欢使用force: true，另一种可能的解决方法是使用.then() 将本机或基于jquery 的悬停触发器排队。
对不起，如果我遗漏了什么，但cy.get("target the li/a") 看起来不正确。我会使用cy.get('a').content(' Target Menu ').trigger('mouseover')。
@eric99 我相信他们是在说"target the li/a" 将被替换为实际针对该元素的选择器。
啊，是的，这有点愚蠢——问题可能出在选择器上。航行接近获得minimal, complete and verifiable example 票。
在 javascript 或 CSS 中显示和隐藏菜单选项的逻辑是什么？您能否在菜单上发布实际处理鼠标事件的代码？我刚刚为我的项目实施了一个使用.trigger('mouseover') 的测试，但如果您处理这些事件的应用代码不同，那么同样的事情可能无法正常工作。

标签： javascript jquery typescript automation cypress

【解决方案1】：

朋友

首先，感谢您的所有时间和建议。

我找到了触发鼠标悬停事件并显示引导子菜单的方法。不使用 { 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的隐藏/显示事件。

【讨论】：

你试过我发布的解决方案了吗？
是的，但它不起作用。下面，命令起作用 Cypress.$($elem[0]).siblings("ul").show();

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

invoke('show') 不显示隐藏元素，因为您正在使用隐藏元素的祖父的定位器。尝试使用隐藏元素的直接父元素。然后invoke('show')会做鼠标悬停功能。

【讨论】：