Cadeno
Il playground

Ventuno fixture progettate per rompere registratori ingenui.

Ogni pagina qui sotto è una trappola controllata — classi hashate, modali pigre, Shadow DOM, flussi multi-tab, composizione IME, drag-and-drop. Installa l'estensione, clicca Start, esegui i passi di Try this e confronta l<code>ActionStep[]</code> catturato con loutput atteso descritto in ogni pagina.

  1. installa
  2. fissa alla barra
  3. apri una fixture
  4. Start
  5. segui "Try this"
  6. Save as Skill
Matrice di copertura20 fixture in totale
F.compositi del mondo reale — Notion / Linear / Jira / Salesforce4 fixture
A.stabilità dei selettori — classi hashate, fratelli identici, i18n4 fixture
B.async + timing — rotte SPA, modali pigre2 fixture
C.multi-superficie — iframe, Shadow DOM, mascheramento, nuova tab4 fixture
D.specialità input — drag, file, combo, contenteditable, appunti, combobox6 fixture
F.

Compositi del mondo reale

Fixture sostanziose in forma di prodotto che concatenano oltre 12 punti di difficoltà in un workflow coerente — il più vicino che il playground arriva a "reggerebbe una giornata di lavoro?".

4 fixture
Editor a blocchi
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 punti di difficoltà
A2A3A4B1B3D1D2D3D4D5D6E2
Tracker issue
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 punti di difficoltà
A2A3A4B1B2B3D1D3D4D5D6E2
Bacheca sprint
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 punti di difficoltà
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 punti di difficoltà
A2A3B1B2B3C1C2C4D1D2D3D4D5D6E2
A.

Stabilità dei selettori

I selettori devono continuare a funzionare dopo classi dinamiche, fratelli identici e cambi di locale.

4 fixture
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--ab3f9c
A3 · Identical sibling tiebreak
Six rows with identical "Pick" buttons. Only position distinguishes them.
fingerprintIndex: 3
A4 · Locale-stable selectors via data-i18n-key
"Continue" / "继续" / "Weiter" — same DOM, three languages.
data-i18n-key="action.continue"
B.

Async + timing

La riproduzione deve aspettare rotte SPA, ricerche debounciate e modali montate tardi.

2 fixture
B1 · SPA route transition
Tab switches mount different content 350ms later — no real navigation.
pushState → waitFor()
B3 · Lazy-mounted modal
The modal appears 700ms after you click the trigger button.
elementVisible(700ms)
C.

Multi-superficie

Iframe, Shadow DOM e flussi multi-tab sono di prima classe.

4 fixture
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.create
D.

Specialità input

Drag/drop, upload file, combo di modificatori, contenteditable, appunti, combobox ARIA.

6 fixture
D1 · HTML5 drag & drop
Drag a card from "Backlog" onto "In progress".
drag → dataTransfer
D2 · File upload
Pick a file. Recorder captures filename + size + mime — never the bytes.
fileMeta · no bytes
D3 · 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-V
D6 · ARIA combobox
Type to filter, click an option.
comboboxContext.optionText