Scrollspy Navigation

Navigation & Layout Scrollspy 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

Navigation / Scrollspy

Scrollspy Navigation

Highlights section in view inside a scrollable pane.

Top of pane

Intro

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae urna at sem.

Details

Curabitur rhoncus massa a metus bibendum, a fringilla sem blandit. Integer ac nisl nec.

Aliquam erat volutpat. Pellentesque accumsan sem vel facilisis molestie.

Summary

Donec euismod, arcu id gravida bibendum, dolor arcu suscipit erat, vitae varius magna nulla vel nisl.

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='scrollspy-navigation-primary']
  • [data-test-id='scrollspy-navigation-secondary']
  • [data-test-id='scrollspy-navigation-action']
  • [aria-label='Scrollspy Navigation']
  • getByRole('button', { name: 'Scrollspy' })

Fallback

  • section.scrollspy-navigation-container :nth-of-type(1)
  • .card.scrollspy_navigation button:nth-of-type(1)
  • form.scrollspy-navigation-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 Pagination Component
Sticky Header Next