Standalone component gallery

Component patterns students can automate.

Use this page to teach selectors, assertions, keyboard support, validation, and responsive layout checks.

What this page is doing

It provides a clean, separate area for practicing core component interactions without the login precondition.

Form controls

  • Input fields
  • Textarea
  • Select dropdown
  • Checkbox and radio

Status and feedback

  • Toast banners
  • Polite live region updates
  • Success and error states

Interaction patterns

  • Hover target
  • Modal
  • Buttons
  • Switch

Recommended lesson use

Introduce locator strategy progression: role and label first, then test ids where appropriate, then CSS as a fallback.