Why Force option for hidden elements in Cypress? - Purpose & Use Cases

The Big Idea

What if you could click invisible buttons without lifting a finger?

The Scenario

Imagine you are testing a website where some buttons or inputs are hidden behind menus or overlays. You try clicking them manually, but since they are not visible, your clicks don't work. You have to open menus or scroll carefully every time to reach them.

The Problem

Manually testing hidden elements is slow and frustrating. You might miss clicking some hidden buttons or enter wrong data because the element is not visible. It's easy to make mistakes or waste time trying to find and interact with these hidden parts.

The Solution

The force option in Cypress lets you interact with hidden elements directly. It tells Cypress to click or type on elements even if they are not visible on the screen. This saves time and avoids errors by skipping the need to reveal elements first.

Before vs After

✗ Before

cy.get('#submit').click(); // Fails if button is hidden

✓ After

cy.get('#submit').click({ force: true }); // Clicks even if hidden

What It Enables

Using the force option enables smooth, reliable testing of all elements, visible or hidden, without extra steps.

Real Life Example

Testing a dropdown menu where the submit button is hidden until you open the menu. Instead of opening the menu manually, you use force to click the submit button directly.

Key Takeaways

Manual testing hidden elements is slow and error-prone.

Force option lets tests interact with hidden elements easily.

This makes tests faster and more reliable.