Cadeno
Playground

Двадцать одна фикстура, спроектированная, чтобы ломать наивные рекордеры.

Каждая страница ниже — управляемая ловушка: хеш-классы, ленивые модалки, Shadow DOM, потоки между вкладками, IME-композиция, drag-and-drop. Установите расширение, кликните Start, выполните шаги Try this и сравните захваченный ActionStep[] с ожидаемым выводом, описанным на каждой странице.

  1. установить
  2. закрепить на панели
  3. открыть фикстуру
  4. Start
  5. следовать "Try this"
  6. Save as Skill
Матрица покрытия20 фикстур всего
F.композиты реального мира — Notion / Linear / Jira / Salesforce4 фикстур
A.стабильность селекторов — хеш-классы, одинаковые соседи, i18n4 фикстур
B.async + тайминги — маршруты SPA, ленивые модалки2 фикстур
C.мульти-поверхности — iframe, Shadow DOM, маскирование, новая вкладка4 фикстур
D.особенности ввода — drag, файл, комбо, contenteditable, буфер обмена, combobox6 фикстур
F.

Композиты реального мира

Существенные продуктоподобные фикстуры, связывающие 12+ точек сложности в один связный workflow — самое близкое к "выдержит ли это рабочий день", чего playground достигает.

4 фикстур
Блочный редактор
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 точек сложности
A2A3A4B1B3D1D2D3D4D5D6E2
Трекер задач
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 точек сложности
A2A3A4B1B2B3D1D3D4D5D6E2
Доска спринта
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 точек сложности
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 точек сложности
A2A3B1B2B3C1C2C4D1D2D3D4D5D6E2
A.

Стабильность селекторов

Селекторы должны продолжать работать после динамических классов, одинаковых соседей и смены локали.

4 фикстур
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 + тайминги

Воспроизведение должно ждать маршруты SPA, debounce-поиски и лениво смонтированные модалки.

2 фикстур
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.

Мульти-поверхности

Iframe, Shadow DOM и потоки между вкладками — первоклассные.

4 фикстур
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.

Особенности ввода

Drag/drop, загрузка файлов, комбо модификаторов, contenteditable, буфер обмена, ARIA combobox.

6 фикстур
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