Cypress - Hidden Elements

---

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

For handling the 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 Sign in menu, the Sign in button gets displayed, as shown below −

On moving the mouse out of the Sign in menu, the Sign in button gets hidden, as displayed below −

Implementation

The implementation of the hidden elements with jQuery show method is as follows −

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://www.amazon.com/");
      // show hidden element with invoke
      cy.get('#nav-flyout-ya-signin').invoke('show');
      //click hidden element
      cy.contains('Sign').click();
   });
});

Execution Results

The output is given below −

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://www.amazon.com/");
      // show hidden element with invoke
      cy.get('#nav-flyout-ya-signin').invoke('show');
      //click hidden element
      cy.contains('Sign').click();
   });
});

Execution Results

The output is given below −

The execution logs show the hidden elements represented by an icon at the right of the steps.

Cypress has another technique for handling hidden elements.

For example, to click a hidden element we can use the Cypress command click and pass the option {force : true} as a parameter to it - click({ force: true }).

This modifies the hidden characteristics of the hidden element and we can click it.

Implementation with click

Given below is the implementation with click having option in Cypress −

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch URL
      cy.visit("https://www.amazon.com/");
      //click hidden element
      cy.contains('Sign').click({force:true});
   });
});

Execution Results

The output is mentioned below −

The execution logs show the hidden element clicked (Sign in) and we are navigated to the next page.