[Cypress] Interact with Hidden Elements in a Cypress Test

We often only show UI elements as a result of some user interaction. Cypress detects visibility and by default won’t allow your test to interact with an element that isn’t visible. In this lesson, we’ll work with a button that is shown on hover and see how you can either bypass the visibility restriction or use Cypress to update the state of your application, making items visible prior to interacting with them.

 

For example the delete icon was hidden by default, only show up when you hover over it, to test those hidden element. we need to call:

.invoke('show')

 

    it('should Delete an item', function () {
        cy.server();
        cy.route({
            method: 'DELETE',
            url: '/api/todos/*',
            response: {}
        }).as('delete');

        cy.seedAndVisit();

        cy.get('.todo-list li')
            .first()
            .find('.destroy')
            .invoke('show') // Make the hidden button appear
            .click();

        cy.wait('@delete');

        cy.get('.todo-list li')
            .should('have.length', 3);
    });