playwright-interactive
Persistent browser and Electron debugging with live session handles across code iterations.
- Maintains the same Playwright handles (
browser,context,page) across multiplejs_replcells, eliminating restart overhead during iterative UI testing and QA. - Supports desktop web (explicit viewport or native-window mode), mobile web emulation, and Electron app debugging from a single persistent session.
- Includes structured QA workflow: write a coverage inventory upfront, run functional tests with real user input, then run separate visual QA with screenshot capture and viewport-fit validation.
- Provides reload helpers for renderer-only changes and restart paths for main-process or startup changes, with explicit guidance on when to reload versus relaunch.
- Built-in screenshot normalization for CSS-pixel alignment (web and Electron), clipped region capture, and coordinate-based follow-up actions for model-assisted debugging.
Playwright Interactive Skill
Use a persistent js_repl Playwright session to debug local web or Electron apps, keep the same handles alive across iterations, and run functional plus visual QA without restarting the whole toolchain unless the process ownership changed.
Preconditions
js_replmust be enabled for this skill.- If
js_replis missing, enable it in~/.codex/config.toml:
[features]
js_repl = true
- You can also start a new session with
--enable js_repl(equivalent to-c features.js_repl=true). - After enabling
js_repl, start a new Codex session so the tool list refreshes. - For now, run this workflow with sandboxing disabled: start Codex with
--sandbox danger-full-access(or the equivalent config forsandbox_mode=danger-full-access). This is a temporary requirement whilejs_repl+ Playwright support inside the sandbox is still being completed. - Run setup from the same project directory you need to debug.
- Treat
js_repl_resetas a recovery tool, not routine cleanup. Resetting the kernel destroys your Playwright handles.
More from openai/skills
screenshot
Use when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are unavailable and an OS-level capture is needed.
2.7Ksecurity-best-practices
Perform language and framework specific security best-practice reviews and suggest improvements. Trigger only when the user explicitly requests security best practices guidance, a security review/report, or secure-by-default coding help. Trigger only for supported languages (python, javascript/typescript, go). Do not trigger for general code review, debugging, or non-security tasks.
2.5Kfigma
Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.
2.4Kplaywright
Use when the task requires automating a real browser from the terminal (navigation, form filling, snapshots, screenshots, data extraction, UI-flow debugging) via `playwright-cli` or the bundled wrapper script.
2.4Kpdf
Use when tasks involve reading, creating, or reviewing PDF files where rendering and layout matter; prefer visual checks by rendering pages (Poppler) and use Python tools such as `reportlab`, `pdfplumber`, and `pypdf` for generation and extraction.
2.3Kfigma-implement-design
Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.
2.2K