プレイグラウンド

21 のフィクスチャ、設計の意図はナイーブなレコーダーを壊すこと。

下のページはどれも仕組まれた罠です — ハッシュクラス、遅延モーダル、Shadow DOM、タブ間フロー、IME 合成、ドラッグアンドドロップ。拡張機能をインストールし、Start をクリックし、Try this の手順を実行し、各ページに書かれた期待出力と捕捉した ActionStep[] を比較してください。

インストール
ツールバーに固定
フィクスチャを開く
Start
"Try this" に従う
Save as Skill

カバレッジマトリクス20 フィクスチャ

F.実プロダクト複合 — Notion / Linear / Jira / Salesforce4 フィクスチャ

A.セレクタ安定性 — ハッシュクラス、同一兄弟、i18n4 フィクスチャ

B.非同期 + タイミング — SPA ルート、遅延モーダル2 フィクスチャ

C.マルチサーフェス — iframe、Shadow DOM、伏字、新規タブ4 フィクスチャ

D.入力の特殊性 — ドラッグ、ファイル、コンボ、contenteditable、クリップボード、combobox6 フィクスチャ

F.

実プロダクト複合

12 を超える難所を一つのワークフローに連結する、製品形態のしっかりしたフィクスチャ — プレイグラウンドが「1 日の仕事に耐えるか」に最も近づく部分。

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.

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.

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.

A2A3A4B1B3C1C2C4D1D2D3D4D5D6E2

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.

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.

非同期 + タイミング

再生は SPA ルート、デバウンス検索、遅延マウントモーダルを待つ必要がある。

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.

入力の特殊性

ドラッグ / ドロップ、ファイルアップロード、修飾キーコンボ、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