Claude Skill MartBrowse skillsWhat is a Skill?
 
← Back to list

Playwright Browser Automation Skill

Lets Claude write and run custom Playwright scripts to test sites, capture screenshots, and automate logins and forms.

Dev & CodingIntermediate★ 3,004⑂ 227AI score 9/10Last updated: Dec 19, 2025

What it does

  • Auto-detects running dev servers so you never hardcode a localhost URL.
  • Writes task-specific Playwright scripts to /tmp/playwright-test-*.js and runs them through the run.js wrapper, keeping your repo clean.
  • Defaults to a visible browser (headless: false) so you can watch and debug each step.
  • Ships ready-made patterns: full-page screenshots, multi-viewport responsive checks, login flows, form fill/submit, and broken-link scans.
  • Provides helper utilities (safeClick with retries, cookie-banner handling, table extraction, timestamped screenshots) plus custom HTTP headers via PW_HEADER_NAME / PW_EXTRA_HEADERS.
  • Advanced topics (network mocking, auth/session reuse, visual regression, mobile emulation) live in API_REFERENCE.md and load only when needed.

Who it's for

  • Frontend developers who want a fast visual check before shipping.
  • Anyone tired of hand-writing one-off E2E scripts.
  • Solo devs and QA folks repeatedly verifying responsive layouts, login flows, and link health.

Examples

  1. "Check how the marketing page looks" → detects the dev server, captures desktop/tablet/mobile screenshots to /tmp, and summarizes findings.
  2. "Verify login redirects to the dashboard" → fills email/password, submits, and asserts with waitForURL('**/dashboard').
  3. "Any broken outbound links?" → collects every a[href^=http], issues HEAD requests, and lists failures with status codes.

· · · Install guide · · ·

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/playwright-skill folder from the GitHub repo lackeyjb/playwright-skill into my ~/.claude/skills/playwright-skill/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill && cp -r /tmp/playwright-skill/skills/playwright-skill ~/.claude/skills/ && cd ~/.claude/skills/playwright-skill && npm run setup

⚠ This is a third-party skill. Check the source repository before installing.

  1. Confirm Node.js (18+ recommended) is installed with node -v.
  2. Clone the repo: git clone https://github.com/lackeyjb/playwright-skill.git
  3. Copy the skill into your Claude skills folder: mkdir -p ~/.claude/skills && cp -r playwright-skill/skills/playwright-skill ~/.claude/skills/
  4. Run the one-time setup: cd ~/.claude/skills/playwright-skill && npm run setup (downloads Playwright and Chromium; may take a few minutes).
  5. Restart Claude Code and try a prompt like "take a screenshot of my localhost page" to confirm the skill loads.
  6. If you hit module errors, re-run npm run setup; if no browser window appears, make sure a display is available or ask for headless mode.
View source on GitHub ↗License: MIT