Cypress - Mouse Actions

Cypress can handle hidden elements. There are occasions when submenus get displayed only on hovering over the main menu. These submenus are initially made hidden with the CSS property display:none.

For handling hidden elements, Cypress takes the help of the jQuery method show. It has to be invoked with the help of the Cypress command (invoke['show']).

For example, on hovering over the Mouse Hover button, the Top and Reload buttons get displayed, as shown below −

On moving the mouse out of the Mouse Hover button, the Top and Reload buttons get hidden, as shown below −

Implementation with jQuery show method

Given below is the implementation with jQuery show method in Cypress −

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://learn.letskodeit.com/p/practice");
      // show hidden element with invoke
      cy.get('div.mouse-hover-content').invoke('show');
      //click hidden element
      cy.contains('Top').click();
   });
});

Execution Results

The output is as follows −

The execution logs show the hidden element – Top button represented by an icon at the right of the steps.