The playground
Twenty-one fixtures designed to break naïve recorders.
Each page below is a controlled trap — hashed classes, lazy modals, shadow DOM, cross-tab flows, IME composition, drag-and-drop. Install the extension, click Start, run the Try this steps, and compare the captured ActionStep[] against the expected output we've spelled out on each page.
- install
- pin to toolbar
- open a fixture
Startfollow "Try this"Save as Skill
Coverage matrix20 fixtures total
F.real-world composites — Notion / Linear / Jira / Salesforce4 fixtures
A.selector stability — hashed classes, identical siblings, i18n4 fixtures
B.async + timing — SPA routes, lazy modals2 fixtures
C.multi-surface — iframes, shadow DOM, redaction, new tab4 fixtures
D.input specialness — drag, file, chords, contenteditable, clipboard, combobox6 fixtures
F.
Real-world composites
Substantial product-flavored fixtures that chain 12+ difficulty points into one coherent workflow — the closest the playground gets to "would this survive a day at my job".
4 fixtures
Block editor
F1 · Notion-style block editor
A workspace with a sidebar of pages, a block-based contenteditable doc, slash commands, @-mentions, and drag-handle reordering.
12 difficulty points
A2A3A4B1B3D1D2D3D4D5D6E2
Issue tracker
F2 · Linear-style issue tracker
Keyboard-first issue tracker: Cmd+K command palette, status/priority/assignee comboboxes, list and Kanban views, drag between columns.
12 difficulty points
A2A3A4B1B2B3D1D3D4D5D6E2
Sprint board
F3 · Jira-style sprint board
Full login flow: credentials → 2FA → sprint board with drag-between-columns, side flyout with rich-text comments + drag-to-upload attachments, embedded wiki iframe, print preview in new tab.
15 difficulty points
A2A3A4B1B3C1C2C4D1D2D3D4D5D6E2
CRM
F4 · Salesforce-style CRM
Login → home → accounts list → record detail with inline-edit pencils, masked phone/SSN/CC fields, Country→State dependent comboboxes, attachment dropzone, multi-step approval workflow, "Generate quote" new tab, live-chat widget in an iframe.
15 difficulty points
A2A3B1B2B3C1C2C4D1D2D3D4D5D6E2
A.
Selector stability
Selectors must keep working after dynamic classes, identical siblings, and locale changes.
4 fixtures
A1 · Static form (smoke)
Three text fields + submit. The baseline every recorder must pass.
[data-testid="*-input"]A2 · Dynamic class hashes
Buttons get fresh `btn__primary--ab3f9c` classes on every load.
.btn__primary--ab3f9cA3 · Identical sibling tiebreak
Six rows with identical "Pick" buttons. Only position distinguishes them.
fingerprintIndex: 3A4 · Locale-stable selectors via data-i18n-key
"Continue" / "继续" / "Weiter" — same DOM, three languages.
data-i18n-key="action.continue"B.
Async + timing
Replay must wait for SPA routes, debounced searches, and lazy-mounted modals.
2 fixtures
C.
Multi-surface
Iframes, shadow DOM, and multi-tab flows are first-class.
4 fixtures
C1 · Same-origin iframe
A button inside an iframe. Recorder injects into the iframe; actions carry a `frameId`.
frameId: <non-zero>C2 · Sensitive-field redaction
Password, phone, and credit-card inputs are auto-masked before they hit storage.
masked: true · ***C3 · Shadow DOM piercing
`<my-card>` Web Component with an open shadow root.
kind: "shadow"C4 · Multi-tab (target="_blank")
Click a link that opens a second tab, then click on that new tab.
switchTab → tabs.createD.
Input specialness
Drag/drop, file upload, modifier chords, contenteditable, clipboard, ARIA combobox.
6 fixtures
D1 · HTML5 drag & drop
Drag a card from "Backlog" onto "In progress".
drag → dataTransferD2 · File upload
Pick a file. Recorder captures filename + size + mime — never the bytes.
fileMeta · no bytesD3 · Modifier-key chords
Cmd/Ctrl + K opens a palette; Ctrl + Enter submits.
metaKey + "k"D4 · contenteditable richtext
A div with `contenteditable="true"` — like a Notion/Slack composer.
inputType: "contenteditable"D5 · Clipboard (copy + paste)
Copy a value from one place, paste it into another.
Cmd-C → Cmd-VD6 · ARIA combobox
Type to filter, click an option.
comboboxContext.optionText