playwright-interactive
Persistent browser and Electron interaction through `js_repl` for fast iterative UI debugging.
npx skills add Haohao-end/openagent --skill playwright-interactive --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
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.
How it works
- Requires js_repl to be enabled; provides setup steps to enable it or start a session with --enable js_repl.
- Establishes shared Playwright handles (chromium, electronLauncher, browser, context, page, mobileContext, mobilePage, electronApp, appWindow) and stores them in a way that cells can reuse across iterations.
- Defines helpers to reset web handles and ensure a live browser, reload web contexts, and manage context/page bindings.
- Guides on session modes: default explicit viewport for web, with native-window mode as a separate validation pass; Electron uses native-window behavior.
- Provides start/reuse patterns for Web (desktop/mobile) and Electron sessions, including how to reload or relaunch as needed.
- Instructs on a structured workflow from a QA inventory setup through bootstrap, sessionStart, code changes, reloads, and separate QA passes (functional then visual).
- Includes detailed code blocks for bootstrapping, shared helpers, and context switching between web and Electron.
When to use it
- When debugging local web or Electron apps with a persistent Playwright session is advantageous, and you want to reuse handles across iterations rather than restarting the toolchain.
- When you need to perform both functional QA and separate visual QA with controlled viewport behavior and optional native-window checks.
- When you are working within a workspace that supports js_repl and Playwright and you want to minimize handle churn between iterations.
What it can touch
- It interacts with: Playwright components (e.g., chromium, electronLauncher), and runtime bindings in the js_repl environment, including variables such as browser, context, page, mobileContext, mobilePage, electronApp, appWindow.
- It may execute setup commands, load targets via TARGET_URL, and manipulate pages via navigation and reloads as described in the workflow.
Caveats
- js_repl must be enabled; resetting via js_repl_reset is a recovery tool and can destroy Playwright handles.
- A temporary sandboxing configuration is required: start Codex with --sandbox danger-full-access until Playwright js_repl support within the sandbox is complete.
- If you switch workspaces, you must repeat the setup steps in the new workspace.
- Electron handling assumes native-window behavior and requires the correct ELECTRON_ENTRY when appropriate.
- The workflow emphasizes manual QA steps and signoff checks; automated outcomes are not guaranteed by the skill itself.
# 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_repl` must be enabled for this skill. - If `js_repl` is missing, enable it in `~/.codex/config.toml`: ```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 for `sandbox_mode=danger-full-access`). This is a temporary requirement while `js_repl` + Playwright support inside the sandbox is still being completed. - Run setup from the same project directory you need to debug. - Treat `js_repl_reset` as a recovery tool, not routine cleanup. Resetting the kernel destroys your Playwright handles. ## One-time setup ```bash test -f package.json || npm init -y npm install playwright # Web-only, for headed Chromi
- Preconditions
- One-time setup
- Core Workflow
- Bootstrap (Run Once)
- Choose Session Mode
- Start or Reuse Web Session
- Desktop Web Context
- Mobile Web Context
- Native-Window Web Pass
- Start or Reuse Electron Session
- Reuse Sessions During Iteration
- Checklists
- Session Loop
- Reload Decision
test -f package.json || npm init -y
npm install playwright
npx playwright install chromium
npm install --save-dev electron
node -e "import('playwright').then(() => console.log('playwright import ok')).catch((error) => { console.error(error); process.exit(1); })"
npm startWhat does the playwright-interactive skill do?
Persistent browser and Electron interaction through `js_repl` for fast iterative UI debugging.
How do I install it?
Run `npx skills add Haohao-end/openagent --skill playwright-interactive --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Haohao-end/openagent, a repository with 778 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.