I have a situation where I want to open the sub-submenu of the main menu which has layout build using nested "ul-li ".

sub-menu gets open when mouse is hover to the li which has Children (ul-li) as below

<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>

Here, My requirement is to mouse over to "Target Menu" which will open its sub-menu and then want to trigger the click the event of "Sub Menu 1/2/3" respectively.

I have gone through the documents of cypress for handling this feature. As .hover() feature is not available with cypress.

.html# .html#Syntax .html#Actionability

I have also tried the below mands but it fails too. Nothing hover or mouseover effect occurs and due to which automation breaks when it tries to click the "hidden Li (sub Menu 1/2/3)".

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

One of the blogs while searching I found that to Interact with hidden elements which gets visible on mouse hovering effect on some button or link, you have to use the cy.invoke as below which will execute the jquery "show" event and makes the hidden element visible and then you can click on the hidden elements. Unfortunately, that method too is not working as in Typescript when I write the below mand it doesn't allow me to pile as "show" is not the valid function name.

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

Please guide for the possible solution related to this. Executing click mand with { force: true } of the hidden element is the work around for this but is not a valid one though.

I have a situation where I want to open the sub-submenu of the main menu which has layout build using nested "ul-li ".

sub-menu gets open when mouse is hover to the li which has Children (ul-li) as below

<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>

Here, My requirement is to mouse over to "Target Menu" which will open its sub-menu and then want to trigger the click the event of "Sub Menu 1/2/3" respectively.

I have gone through the documents of cypress for handling this feature. As .hover() feature is not available with cypress.

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

I have also tried the below mands but it fails too. Nothing hover or mouseover effect occurs and due to which automation breaks when it tries to click the "hidden Li (sub Menu 1/2/3)".

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

One of the blogs while searching I found that to Interact with hidden elements which gets visible on mouse hovering effect on some button or link, you have to use the cy.invoke as below which will execute the jquery "show" event and makes the hidden element visible and then you can click on the hidden elements. Unfortunately, that method too is not working as in Typescript when I write the below mand it doesn't allow me to pile as "show" is not the valid function name.

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

Please guide for the possible solution related to this. Executing click mand with { force: true } of the hidden element is the work around for this but is not a valid one though.

• javascript
• jquery
• typescript
• automation
• cypress

Share Improve this question Follow edited Jul 18, 2018 at 16:46 Prashant Kankhara asked Jul 17, 2018 at 7:01 Prashant KankharaPrashant Kankhara 1,58844 gold badges1616 silver badges3131 bronze badges 9

• If you don't like using force: true, another potential workaround could be to queue a native or jquery-based hover trigger using .then(). – Joshua Wade Commented Jul 17, 2018 at 14:04
• Sorry if I am missing something, but cy.get("target the li/a") does not look correct. I would use cy.get('a').content(' Target Menu ').trigger('mouseover'). – user8745435 Commented Jul 17, 2018 at 20:00
• @eric99 I believe they are saying that "target the li/a" would be replaced with a selector that actually targets the element. – Joshua Wade Commented Jul 17, 2018 at 20:17
• Ah yes, well that is a bit daft - the problem may be in the selector. Sailing close to getting a minimal, plete and verifiable example ticket. – user8745435 Commented Jul 17, 2018 at 21:08
• 1 Is the logic for showing and hiding your menu options in javascript or CSS? Could you post the code that actually handles mouse events on the menu? I just implemented a test for my project that used .trigger('mouseover'), but if your app code for handling those events is different then the same thing might not work. – Joshua Wade Commented Jul 18, 2018 at 13:29

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 2

Friends

Firstly, Thanks for all your time & suggestions.

I have found the work around to trigger the mouseover event and show the bootstrap submenu. without using the { force: true }.

Solution that I implemented. Appreciated if anyone finds different and better solution. Please do share.

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

Using this I have manually makes the ul to show first and then execute the click event of the submenu. For this I have tried

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

but above mands didn't work. So I move to manually trigger the hide/show event of jquery.

Based on the ments, your issue seems to be with how menus are handled in Bootstrap.

Bootstrap menus can be triggered with a special .dropdown() function added to jQuery. Since Cypress gives you native access to the DOM, you can just call that function from within your test. Here's how this would look in Cypress:

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

hidden elements are not shown through invoke('show') because, you are using the locator of the grand parent of the hidden elements. Try using the immediate parent of the Hidden elements. Then invoke('show') will do the mouse hover function.