Overlay on Scroll

Difficult DOM Overlay Intermediate Nice to Try

Hands-on

Interactive Sandbox

Static partial

Try this

  1. Open page
  2. Interact control
  3. Read result

Assert this

  • Visible elements
  • Text matches
  • Button state toggles

Difficult DOM / Overlay on scroll

Overlay on Scroll

Scroll to dismiss the overlay before clicking the action.

Scrollable content

Keep scrolling to remove the overlay curtain. Automation can assert the overlay state flips after a scroll threshold.

Scroll a bit more...

Secondary input is at the end of this box.

Scroll to dismiss this overlay

Until then, the primary action stays blocked.

Overlay active

Learning & behavior

User flow

  1. Open page
  2. Interact control
  3. Read result

Learning objectives

  • Pick solid locators
  • Time waits
  • Assert state

Suggested assertions

  • Visible elements
  • Text matches
  • Button state toggles

Selector tips

Good

  • [data-test-id='overlay-on-scroll-primary']
  • [data-test-id='overlay-on-scroll-secondary']
  • [data-test-id='overlay-on-scroll-action']
  • [aria-label='Overlay on Scroll']
  • getByRole('button', { name: 'Overlay' })

Fallback

  • section.overlay-on-scroll-container :nth-of-type(1)
  • .card.overlay_on_scroll button:nth-of-type(1)
  • form.overlay-on-scroll-form .field-group:nth-child(1)

Avoid

  • .mt-4.mb-2.flex.items-center > input:nth-child(1)
  • .css-1a2b3c4
  • div[class*='temp-'][class*='hover']

Notes

  • Some parts delay render
  • Icon buttons need aria-label
  • Layout classes may shift
Prev Hover-only Dropdown
Dynamic Class Change Next