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 the 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('Adglob 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();
});
});
Then the next step is −
describe('Adglob 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();
});
});
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 the option in Cypress −
describe('Adglob 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});
});
});
The execution logs show the hidden element clicked (Sign in) and we are navigated to the next page.