Cadeno
플레이그라운드

21개의 픽스처, 설계 의도는 순진한 레코더를 망가뜨리는 것.

아래 각 페이지는 통제된 함정입니다 — 해시 클래스, 지연 모달, Shadow DOM, 탭 간 플로우, IME 합성, 드래그 앤 드롭. 확장을 설치하고 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.비동기 + 타이밍 — SPA 라우트, 지연 모달2 픽스처
C.멀티 서피스 — iframe, Shadow DOM, 마스킹, 새 탭4 픽스처
D.입력 특수성 — 드래그, 파일, 콤보, contenteditable, 클립보드, combobox6 픽스처
F.

실제 제품 복합

12개 이상 난점을 하나의 일관된 워크플로로 묶은 본격적 제품 형태의 픽스처 — 플레이그라운드가 "하루 업무를 견딜 수 있을지"에 가장 가까이 가는 지점.

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.

비동기 + 타이밍

재생은 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