Practice

Medium practice

Combined actions and real-world UI patterns — native vs. custom widgets, async timing, things that don't quite behave like the tutorial said.

12 drills across every category — come back to any of them as many times as you like, there's nothing to "complete."

Medium 💬 Alerts, Dialogs & Popups

Auto-Dismissing Toast

A success toast appears and vanishes after ~2.5s — a pure hardcoded `sleep()` will race it.

css
Medium 📝 Forms & Inputs

Custom (Div-Based) Dropdown

A JS-built dropdown with no native `<select>` — clicking opens a listbox you must locate by role, not tag.

cssaria-role
Medium 🎯 Locator Strategies

Duplicate Classes

Five buttons share one class and no unique attribute — practice `nth-of-type` and structural CSS.

css
Medium ⌨️ Keyboard & Mouse

Keyboard-Only Form

Complete the entire form using Tab/Shift+Tab/Enter/Space only — no clicks allowed. Focus order matters.

aria-role
Medium 📡 Live / Realtime Updates

Live SSE Ticker

A Server-Sent Events stream pushes a new row every couple of seconds — assert on content that only exists briefly.

css
Medium 📝 Forms & Inputs

Multi-Select Listbox

A native multi-select — practice ctrl/cmd-click and reading back the full selected set.

css
Medium 🎯 Locator Strategies

No Unique Attributes

An element with no id, no class, no data-testid — only its text and position identify it.

textxpath
Medium 🔐 Auth & Sessions

Protected Dashboard

Only reachable while logged in — visit it signed-out and you get redirected back to login.

css
Medium ⌨️ Keyboard & Mouse

Right-Click Context Menu

A custom context menu appears only on right-click (contextmenu event) — practice dispatching non-primary-button clicks.

css
Medium 📎 File Upload

Single File Upload

Upload one file and see its name/size/type echoed back from the server — practice `input[type=file]` automation.

id
Medium 🪟 Windows, Tabs & Frames

Single iframe

A form lives inside one iframe — you must switch context before you can interact with it.

css
Medium 🧲 Drag & Drop / Sortable

Sortable List (Native HTML5 DnD)

Reorder a list using the native HTML5 drag-and-drop API — notoriously flaky to automate without dispatching real drag events.

css

Comfortable with the fundamentals?

Scenarios string several drills together into one realistic, multi-step flow — closer to what you'd actually be asked to automate.

Try a Scenario