Write and Run Playwright Automation From Your Coding Agent

Pre-built browser-automation scripts cover the demo, then fall apart on your app's third-party login, your table's virtualized scrolling, your checkout's race condition. lackeyjb's playwright-skill, a 3k-star Agent Skill, takes the opposite approach: your coding agent writes custom Playwright code for the exact task at hand, then executes it through a portable runner that keeps module resolution stable.

Why This Skill Matters

The README frames the niche precisely: use it when the agent needs to write a real Playwright program — loops, assertions, multiple contexts, network interception, screenshots, video, or a script you want to keep and rerun. The design choices follow from that:

• Custom code, not canned flows. The agent writes the automation for your specific request, so unusual selectors and multi-step flows are first-class citizens.
• Visible browser by default. headless: false means you watch the automation run in real time; headless is available when you explicitly ask for it.
• A portable executor. Automation runs through run.js, which the README calls the universal executor — it exists so module-resolution errors do not eat your run.
• Progressive disclosure. The SKILL.md stays concise, and the full API_REFERENCE.md — selectors, network interception, authentication, visual regression testing, mobile emulation — loads only when the task needs it.

Installation

The recommended path is Vercel's skills CLI, which installs into the native locations of supported agents:

npx skills add lackeyjb/playwright-skill --skill playwright-skill --global --yes

Omit --global to install for the current project only, or add --agent claude-code cursor to target specific agents. Claude Code users can alternatively install it as a plugin:

/plugin marketplace add lackeyjb/playwright-skill

/plugin install playwright-skill@playwright-skill

After any install method, navigate into the installed skill directory and run its setup once — it installs Playwright and Chromium:

npm run setup

Verify by running /help and asking for a trivial task like checking that a page loads.

Real Workflow: End-to-End Check of a Signup Form

With the skill installed and the dev server running, brief the agent:

打开 http://127.0.0.1:3000/signup 检查注册流程：填写姓名、邮箱和密码，提交表单，断言跳转到欢迎页，并对移动端视口重复一遍。每一步都要截图，最后把控制台输出和截图路径整理成一份结果报告。

The agent then writes a Playwright script for exactly those steps — including anything your form needs, like waiting for a debounced email-validity check — and hands it to the executor. The browser opens visibly, the automation runs, and the results come back with console output and screenshots. Because the script is a real file, you keep it, version it, and rerun it in CI-style checks later; that script is the artifact, which is the whole point of this skill.

Tips

• If a run dies with module-not-found errors, the README's troubleshooting says to ensure automation goes through run.js — that is the module-resolution fix.
• Helper screenshots land in the OS temp directory; set PW_ARTIFACT_DIR to keep artifacts somewhere durable.
• Set SLOW_MO when you need to watch a fast flow step by step.
• npm run install-all-browsers from the skill directory installs browsers beyond Chromium.
• Usage examples worth pasting: "Check for broken links", "Verify all images load", "Take screenshots of the dashboard in mobile and desktop".

When Not to Use This

The README draws its own boundaries: for straightforward interactive browsing, start with Microsoft's official @playwright/cli and install its agent skills; for tool-based browser control with accessibility snapshots, use playwright-mcp. This project is the code-first option, best when the automation script itself is the artifact you want to keep. It also has Node.js prerequisites — Playwright and Chromium come via npm run setup — so a no-install environment is not its habitat.

See the leaderboard for more skills.