playwright-expert

An agent skill by Jeffallan, from Jeffallan/claude-skills. Tags: automation, debugging, developer-tools, testing, web.

What it does

Use when writing E2E tests with Playwright, setting up test infrastructure, or debugging flaky browser tests. Invoke to write test scripts, create page objects, configure test fixtures, set up reporters, add CI integration, implement API mocking, or perform visual regression testing. Trigger terms: Playwright, E2E test, end-to-end, browser testing, automation, UI testing, visual testing, Page Object Model, test flakiness.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

npx skills add Jeffallan/claude-skills --skill playwright-expert

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/Jeffallan/claude-skills
cp -r claude-skills/skills/playwright-expert ~/.claude/skills/playwright-expert

Safety box score

Grade C, moderate risk: 33 of 100 risk points, rated 2026-10-20. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This skill is a Playwright testing guide that configures browser E2E tests, debugging, CI, and API mocking. The main risks are that it will run the project's test runner and browser automation, persist login state to disk, and point tests at live or staging services if configured.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	2 (moderate)	It explicitly uses local execution paths like `npx playwright test`, `npx playwright show-trace`, `PWDEBUG=1 npx playwright test`, and `npm run dev`, so installing it authorizes running the project's test runner and browser-debug tooling.
Network access	1 (low)	The skill drives browsers to configured URLs and APIs (`baseURL`, `page.goto('/login')`, `waitForResponse`, `routeFromHAR`), so it can send requests to the app or a staging host, but the traffic is scoped to test targets.
Filesystem reach	1 (low)	It writes test artifacts such as `auth.json`, `playwright-report/`, `results.json`, `results.xml`, traces, screenshots, and videos inside the workspace, but does not show destructive or system-wide file operations.
Secrets & credentials	2 (moderate)	The auth example saves session state with `await page.context().storageState({ path: 'auth.json' });` and reuses it via `storageState: 'auth.json'`, which can capture cookies/tokens and touch credential-bearing `.env` settings.
Privilege & persistence	1 (low)	The CI example runs `npx playwright install --with-deps`, which may install OS packages, but the skill itself does not ask for sudo, global changes, or service registration.
Instruction hijack surface	0 (none)	There are no instructions to ignore safeguards, follow remote prompts, or hide actions; the files stay within normal Playwright guidance.
Irreversible actions	1 (low)	It automates browser interactions, logins, and test runs, but it does not itself publish, pay, delete, or message external systems.
Transparency	0 (none)	All supplied files are plain Markdown with readable commands and examples; there are no binaries, installers, minified blobs, or decoded runtime content.

Before installing

Read `references/configuration.md` and confirm whether `auth.json` or any other storage-state file will contain real session cookies.
Check which `BASE_URL` / `.env` values the tests will use, especially if they point at staging or production.
Verify the repo’s test scripts and Playwright config before running `npx playwright install --with-deps` or `npx playwright test`.
Make sure CI artifacts (`playwright-report/`, traces, screenshots) are acceptable to retain and share.

Rated 2026-10-20 by an automated review of 6 files from the skill's repository.

Source

Repository: Jeffallan/claude-skills (all skills from this repository)
Path: skills/playwright-expert/SKILL.md
Branch: main
Updated: 2026-09-19

dev-browser — Browser automation with persistent named pages via the dev-browser CLI.
TUI Puppeteering with tmux — Use when automating or testing TUI/CLI applications - provides isolated tmux sessions with scripts for input, output capture, and state verification
chrome-mcp-troubleshooting — Diagnose and fix Claude in Chrome MCP extension connectivity issues.
code-improver — Runs an autonomous review-and-fix improvement loop over any code target — a skill, plugin, module, or directory — using a reviewer the user names.
control-cli — Build or adapt a local harness to drive, inspect, and profile an interactive CLI or TUI without external services.
control-ui — Build or adapt a local browser/CDP harness to drive and inspect a web, IDE, or Electron UI.