Hidden Elements

Elements hidden in different ways. Practice detecting visibility with expect(locator).toBeVisible() vs expect(locator).toBeHidden()

display: none

Hidden with display:none

Element exists in DOM but not rendered

visibility: hidden

Hidden with visibility:hidden

Element takes up space but is invisible

opacity: 0

Hidden with opacity:0

Element is transparent but still interactable

Off-screen (left: -9999px)

Hidden off-screen

Element is positioned far off the visible viewport

height: 0 with overflow: hidden

Hidden with zero height

Container has no height, content clipped

Visible element (for comparison)

This element IS visible