/playwright-interactive

name: "playwright-interactive"
description: "Persistent browser and Electron debugging through a harness-native interactive runtime, with Nix-provided Playwright and browsers when available. Use for stateful iterative QA."

Playwright Interactive

Use persistent Playwright handles through the current harness's interactive runtime when stateful browser sessions make iteration faster than one-shot scripts.

Default to the `playwright` CLI skill when persistent in-process handles are not needed. In khanelinix/Nix environments, `playwright-cli` already provides Playwright plus runnable browsers. Do not run `npm install playwright`, `npx playwright install`, or any command that populates `~/.cache/ms-playwright` as setup.

Plays

• `references/setup.md`: `js_repl`-specific enablement, Nix-backed checks, and

bootstrap cell. Read only when that tool exists.

• `references/web.md`: desktop/mobile/native web sessions and reloads.
• `references/electron.md`: Electron launch, reload, relaunch.
• `references/qa.md`: functional QA, visual QA, signoff inventory.
• `references/screenshots.md`: CSS-normalized screenshots and viewport checks.
• `references/troubleshooting.md`: stale handles, server lifecycle, cleanup.

Runtime Routing

• Harness exposes `js_repl`: read `references/setup.md`, then reuse the

in-process handles described by this skill.

• Another harness with a persistent JavaScript/browser tool: translate the same

handle lifecycle to that native tool; do not emulate unavailable tool names.

• No persistent runtime: use the `playwright` skill and its CLI session instead.
• In every harness, `playwright-cli --help` or the repository's Nix wrapper must

work before browser automation begins.

• Run from project directory being debugged.
• Reset the interactive runtime only for recovery; it destroys handles.

Core Loop

1. Define QA inventory from user request, implemented behavior, and final claims. 2. Start dev server in persistent terminal if needed. 3. Bootstrap the harness-native runtime once; reuse `browser`, `context`, `page`, `electronApp`, and `appWindow`. 4. Launch web page or Electron app. 5. After edits, reload renderer changes; relaunch Electron for main/preload or startup changes. 6. Run functional QA with real user input. 7. Run separate visual QA over required states/viewports. 8. Capture evidence only after state matches claim. 9. Clean up only when task is finished or intentionally keep session alive.

Read only play files needed for current task.

Signoff Bar

• Functional path works with normal input.
• Each requested behavior and final claim maps to a QA check.
• Visual inspection covers initial view, meaningful post-interaction states,

density/overflow, clipping, contrast, layering, and viewport fit.

• Screenshot review and numeric checks agree, or discrepancy is investigated.
• Console errors reviewed; new errors fixed or reported.