Why Hidden elements handling in Cypress? - Purpose & Use Cases

The Big Idea

What if your tests could find and click buttons even before they appear on screen?

The Scenario

Imagine you are testing a website manually and need to check if a button that only appears after clicking another element works correctly. You try to find it on the page, but it is hidden until triggered. You keep clicking and searching, but sometimes you miss it or click the wrong thing.

The Problem

Manually checking hidden elements is slow and frustrating. You can easily miss hidden buttons or fields because they are not visible. This leads to mistakes and wasted time. Also, you cannot repeat the exact steps consistently, so bugs slip through.

The Solution

Using hidden elements handling in Cypress lets you find and test elements even if they are not visible yet. Cypress commands can check for hidden elements and interact with them safely. This makes your tests reliable and fast, catching bugs that manual testing misses.

Before vs After

✗ Before

cy.get('button').click(); // tries to click visible button only
cy.get('input').type('data'); // fails if input is hidden

✓ After

cy.get('button').click();
cy.get('input', { includeShadowDom: true, timeout: 5000 }).should('exist').type('data', { force: true });

What It Enables

You can test all parts of your app, even hidden or dynamic elements, ensuring nothing breaks when users interact with your site.

Real Life Example

On a shopping site, the "Add to Cart" button appears only after selecting a product size. Hidden elements handling lets your test click that button reliably, even if it is hidden at first.

Key Takeaways

Manual testing misses hidden elements easily.

Hidden elements handling makes tests reliable and fast.

It helps catch bugs in dynamic user interfaces.