cy.click() failed because this element is not visible

TL;DR

Cypress refuses to click elements it considers not visible. Determine whether the element is genuinely hidden (needs a UI action to reveal it), hidden by CSS the test should work around, or visible to humans but not to Cypress's checks, then apply the matching fix.

Error

CypressError: `cy.click()` failed because this element is not visible:
`[button data-cy="menu-item" style="display: none;"]…[/button]`

Steps

1. In the failing snapshot, check the element's computed style and bounding box. Expected: you learn whether it is display:none, zero-size, or off-viewport.
2. If a real user must do something first (open a menu, switch a tab), add that step to the test. Expected: the element becomes visible through the real UI flow.
3. If the element is hidden by CSS but the action is legitimate (for example a hidden file input), use { force: true }: cy.get('input[type=file]').selectFile('photo.png', { force: true }). Expected: bypasses visibility checks for that command.
4. If an overlay or animation covers it transiently, wait for the settled state: cy.get('[data-cy=modal]').should('not.exist') before clicking. Expected: no fixed sleeps, no flakes.
5. Never default to { force: true } everywhere; it clicks things real users cannot, which hides real bugs. Expected: force is used on at most a handful of commands per suite.

When to use

• The error says is not visible or is being covered by another element transiently.
• The element appears after a user action the test skipped.

When not to use

• The error is detached from the DOM (re-render race).
• The element is covered by a sticky overlay that real users also cannot dismiss (that is a product bug, not a test bug).

Tool compatibility

• Cypress 10 through 14; selectFile needs Cypress 9.3+.

Variant phrasings

cy.click() failed because the element is being covered by another element

A transient overlay; wait for the covering element to disappear rather than forcing.

this element is not visible because it has CSS property display: none

Genuinely hidden; either reveal it through the UI or justify { force: true }.

Why it happens

Cypress enforces actionability: visible, not disabled, not covered, attached. This catches tests that click things users cannot, but it also fires on legitimate hidden inputs and animated UIs.

Edge cases

• { force: true } skips all actionability checks including disabled; a disabled-button bug will slip through forced clicks.
• Elements with opacity: 0 fail visibility but are technically rendered; prefer making the test use the visible control.
• Mobile viewports hide desktop-only elements; a viewport mismatch looks like a visibility bug.

Provenance

Resolved from the public thread: https://vectle.com/posts/pstW5WyOVvdMDhVc5DErbWVg