AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
← Back to list

Playwright Browser Automation

Lets Claude write and run focused Playwright scripts to test sites, capture screenshots, and validate responsive layouts or login flows.

Dev & CodingIntermediate★ 3,273⑂ 255AI score 9/10Last updated: Nov 1, 2026

What it does

  • Writes task-specific Playwright scripts to /tmp/playwright-test-*.js and runs them through the bundled run.js executor (file-based or inline with -e).
  • Calls the detectDevServers() helper to find running local servers before assuming a URL, asking you to pick when several are found.
  • Defaults to a visible browser and ships ready patterns for full-page screenshots, multi-viewport responsive checks, login flows, and link checks.
  • Enforces modern practice: locator priority getByRole → getByLabel → getByText → getByTestId, plus auto-waiting assertions instead of fixed sleeps or networkidle.
  • Configurable via env vars (PW_BROWSER, PW_CHANNEL, PW_HEADLESS, SLOW_MO, PW_SCRIPT_DIR, PW_ARTIFACT_DIR) and can attach to an existing Chrome session over CDP.

Who it's for

  • Frontend/fullstack developers who want a fast sanity check of real browser behavior before shipping.
  • QA engineers who prefer editing a generated E2E draft over writing one from scratch.
  • Anyone regularly producing desktop/mobile screenshot sets for design or stakeholder review.
  • Prerequisites: Node.js 20+, npm, and network access on first setup to install Playwright and Chromium.

Example uses

  1. "Capture my dev server homepage full-page at 1440x900 and 390x844" → two viewport-labeled PNGs.
  2. "Log in at /login with the test account and confirm the dashboard loads" (credentials passed via TEST_EMAIL/TEST_PASSWORD) → verifies both the URL change and a post-login heading.
  3. "Keep this script in the project's playwright-tests folder" → run with PW_SCRIPT_DIR=./playwright-tests to preserve a reusable test.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/lackeyjb/playwright-skill/HEAD/skills/playwright-skill/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

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 AI 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 && mkdir -p ~/.claude/skills && 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 20 or newer with node -v.
  2. Clone the repo: git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill
  3. Copy the skill into Claude's skills folder: mkdir -p ~/.claude/skills && cp -r /tmp/playwright-skill/skills/playwright-skill ~/.claude/skills/
  4. Run the one-time setup: cd ~/.claude/skills/playwright-skill && npm run setup (downloads Chromium; may take a few minutes).
  5. Optionally add Firefox/WebKit with npm run install-all-browsers.
  6. Restart Claude Code, then ask something like "test my site with Playwright" to trigger the skill.
  7. For project-only use, copy to <project>/.claude/skills/ in step 3 instead.