title: Cypress invoke doesn't execute the "show" method for hidden elements interaction
body: <p>I have a situation where I want to open the sub-submenu of the main menu which has layout build using nested "ul-li ". </p>
  
  <p>sub-menu gets open when mouse is hover to the li which has Children (ul-li)  as below</p>
  
  <pre><code>&lt;ul class="dropdown"&gt; 
    &lt;li&gt;/&lt;li&gt;
    &lt;li&gt;/&lt;li&gt;
    &lt;li class="dropdown-menu"&gt;
        &lt;a&gt; Target Menu &lt;/a&gt;
        &lt;ul class="dropdown"&gt; 
          &lt;li class="dropdown-sub-menu"&gt;&lt;a&gt; Sub Menu 1&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown-sub-menu"&gt;&lt;a&gt; Sub Menu 2&lt;/a&gt;&lt;/li&gt;
         &lt;li class="dropdown-sub-menu"&gt; &lt;a&gt; Sub Menu 3&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
    &lt;/&lt;li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>I have gone through the documents of cypress for handling this feature. As .hover() feature is not available with cypress.</p>
  
  <p><a href="https://docs.cypress.io/api/commands/hover.html#" rel="nofollow noreferrer">https://docs.cypress.io/api/commands/hover.html#</a>
  <a href="https://docs.cypress.io/api/commands/trigger.html#Syntax" rel="nofollow noreferrer">https://docs.cypress.io/api/commands/trigger.html#Syntax</a>
  <a href="https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Actionability" rel="nofollow noreferrer">https://docs.cypress.io/guides/core-concepts/interacting-with-elements.html#Actionability</a></p>
  
  <p>I have also tried the below commands 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)".</p>
  
  <blockquote>
    <p>cy.get("target the li/a").trigger("mouseover")</p>
  </blockquote>
  
  <p>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 command it doesn't allow me to compile as "show" is not the valid function name. </p>
  
  <blockquote>
    <p>cy.get("li.dropdown-menu ul.dropdown").invoke("show")</p>
  </blockquote>
  
  <p>Please guide for the possible solution related to this. 
  Executing click command with { force: true } of the hidden element is the work around for this but is not a valid one though.</p>