Stepper
Navigation & Layout Stepper Intermediate Nice to TryHands-on
Interactive Sandbox
Try this
- Open page
- Interact control
- Read result
Assert this
- Visible elements
- Text matches
- Button state toggles
Navigation / Stepper
Stepper
Progress through steps, validate inputs, and show status.
1
2
3
Step 1: shipping info
Step 2: payment
Step 3: review
Confirm details then submit.
Step 1 of 3
Learning & behavior
User flow
- Open page
- Interact control
- 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='stepper-primary']
- [data-test-id='stepper-secondary']
- [data-test-id='stepper-action']
- [aria-label='Stepper']
- getByRole('button', { name: 'Stepper' })
Fallback
- section.stepper-container :nth-of-type(1)
- .card.stepper button:nth-of-type(1)
- form.stepper-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