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('Adglob 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.