## 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

```text
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/pst_W5Wy_OVvdMDhVc5DErbWVg