Hidden elements handling in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean when an element is 'hidden' in web testing?

A hidden element is present in the page's HTML but not visible to the user, often due to CSS styles like display: none or visibility: hidden.

intermediate

How can Cypress interact with hidden elements?

By default, Cypress commands like click() only work on visible elements. To interact with hidden elements, you can use options like { force: true } to force the action.

intermediate

Why should you be careful when forcing actions on hidden elements?

Forcing actions on hidden elements can cause tests to pass even if the user cannot interact with those elements, which may hide real usability problems.

beginner

Which Cypress command checks if an element is visible or hidden?

You can use .should('be.visible') to check visibility or .should('not.be.visible') to check if an element is hidden.

beginner

What is a common real-life example of a hidden element in web apps?

A dropdown menu that only appears when you hover or click a button is hidden by default and becomes visible on user interaction.

In Cypress, how do you click a hidden button?

A Use <code>cy.get('button').click()</code> without options

B Use <code>cy.get('button').should('be.visible').click()</code>

C Use <code>cy.get('button').click({ force: true })</code>

D Hidden buttons cannot be clicked in Cypress

By default, Cypress only clicks visible elements. Using { force: true } forces the click even if the element is hidden.

Which CSS property commonly hides elements from view but keeps them in the DOM?

A visibility: hidden

B display: none

C opacity: 0

D position: absolute

visibility: hidden hides the element but it still takes up space in the layout.

What does cy.get('selector').should('not.be.visible') check?

A Element is hidden or not visible

B Element is visible

C Element is disabled

D Element is not in the DOM

This assertion checks that the element exists but is not visible to the user.

Why might forcing clicks on hidden elements be risky in tests?

A It slows down the test execution

B It causes Cypress to crash

C It is not supported by Cypress

D It can hide real user interface problems

Forcing clicks on hidden elements can make tests pass even if users cannot interact with those elements, hiding usability issues.

Which Cypress command helps you check if an element is visible before interacting?

A cy.get('selector').click({ force: true })

B cy.get('selector').should('be.visible')

C cy.get('selector').invoke('hide')

D cy.get('selector').wait()

Using should('be.visible') asserts that the element is visible before performing actions.

Explain how Cypress handles hidden elements and how you can interact with them safely.

Think about visibility checks and forced actions.

Describe a real-life example of a hidden element on a website and how you would test it with Cypress.

Consider common UI patterns that hide elements.