UI Automation Playground
Eleven deliberately tricky UI patterns for practicing Selenium/Playwright/Cypress automation. Each page actually exhibits the behavior it's named for — these are not static mockups.
Drag & Drop
Native HTML5 drag-and-drop: reorder a list and drop items into an archive zone.
Canvas & SVG
Coordinate-based clicking on a canvas and DOM-based interaction with SVG shapes.
Dynamic IDs & Classes
IDs and classes regenerate on every render, forcing text/structural locators.
File Upload & Download
Single/multi file upload, drag-and-drop uploads, and real PDF/CSV/ZIP downloads.
Wizard Form
Multi-step form with dependent dropdowns, conditional fields, and a rich text step.
Iframes
Nested and dynamically-injected iframes requiring frame-context switching.
Shadow DOM
Web components with shadow roots that hide internals from normal DOM queries.
Multi-Window / Tabs
Flows that open new browser windows/tabs and pass data back to the opener.
Modals & Toasts
Dialogs, overlays, and transient toast notifications with timing challenges.
Infinite Scroll
Content that loads dynamically as the user scrolls, with no fixed pagination.
Virtualized Table
A large table that only renders visible rows, hiding off-screen DOM nodes.