Playwright Skill

Playwright Skill makes the agent write a Playwright program for the task, then run it through a bundled executor. The output is a script you can keep, rerun, or turn into a test — not a sequence of browser tool calls.

That is the distinction worth understanding before installing it. Playwright MCP gives the model tool-based browser control. The Chrome DevTools skill gives it inspection and traces. This skill gives it a code artifact.

Source and revision

What it actually does

The workflow is:

1. Resolve SKILL_DIR to the folder containing SKILL.md.
2. Detect a running dev server when the target is localhost.
3. Write a Node script to the OS temp directory, unless the user wants it saved.
4. Run it with node "$SKILL_DIR/run.js" <script.js>.
5. Report actions, failures, screenshots, and artifact paths.

run.js spawns Node with NODE_PATH pointed at the skill's node_modules, keeps the caller's working directory, and propagates exit codes and signals. It accepts a file or an inline -e snippet. The skill also ships helpers for dev-server detection, browser launch, context creation, cookie banners, and screenshots.

The SKILL.md tells the agent to prefer user-facing locators (getByRole, getByLabel, getByText, getByTestId), use web-first assertions instead of fixed sleeps, and verify the page after each action. Those are the current Playwright patterns, not a custom API.

How it compares to the other browser pages

If you want the agent to click around and report what it sees, use the MCP route. If you want a script that reproduces a flow tomorrow, this skill is the closer fit.

Install

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

Permissions and execution model

The skill declares:

allowed-tools: Bash(node:*) Bash(npm:*) Read Write

That is a broad grant, and it is honest about what the skill does. The agent can run arbitrary generated Node code, read files, and write scripts. run.js does not sandbox the child process; it inherits the caller's environment and working directory.

Specific boundaries to understand:

• Visible browser by default. headless: false unless the task or environment says otherwise. Screenshots and actions are visible on the desktop.
• Generated code is untrusted by construction. It is model-written. Read it before running it against a real account or production data.
• Existing Chrome sessions can be attached. The skill documents chromium.connectOverCDP('http://127.0.0.1:9222'), which reuses the running browser's cookies and extensions. The skill itself warns not to use that for secrets unless explicitly intended.
• Test credentials belong in environment variables. The login example reads TEST_EMAIL and TEST_PASSWORD; do not hard-code real credentials into a generated script.
• The browser download is a supply-chain step. npx playwright install chromium fetches a browser build. Pin or mirror it if you need reproducibility.

Artifacts, profile isolation, and cleanup

Practical cleanup:

# If you used a project directory for scripts/artifacts
rm -rf ./playwright-tests ./playwright-artifacts

# Temp files: inspect before deleting
ls "${TMPDIR:-/tmp}"/playwright-test-* 2>/dev/null

If you attach to a real Chrome session, close the debugging port and browser when done. Do not leave --remote-debugging-port=9222 running on a shared machine.

Removal

Removal depends on how the skill was installed. Artifact cleanup above is separate; removing the skill does not delete saved scripts or screenshots.

• Installed with the skills CLI:

  npx skills remove playwright-skill
  

  Add --global if it was installed globally, or --agent to target specific agents. The skills CLI documents remove for installed skills.

• Installed as a Claude Code plugin: remove the playwright-skill@playwright-skill plugin through the agent's plugin manager. The repository does not document a plugin-specific uninstall command.

• Manual copy: delete the skill folder (~/.claude/skills/playwright-skill for a global copy, or <project>/.claude/skills/playwright-skill for a project copy), including its node_modules.

Do not delete Playwright's shared browser cache or any user browser profile as part of removing this skill. The cache can be used by other Playwright projects, and the browser profile may contain unrelated data. If you deliberately want to reclaim the shared browsers, use npx playwright uninstall (add --all only if you intend to remove browsers for every Playwright installation) and check which other projects depend on them first.

Illustrative example

This is a constructed example, not a run against a live site.

Task: verify that a login form rejects a bad password and accepts a test account.

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  try {
    await page.goto(process.env.TARGET_URL || 'http://localhost:3000/login');
    await page.getByLabel('Email').fill(process.env.TEST_EMAIL);
    await page.getByLabel('Password').fill('wrong-password');
    await page.getByRole('button', { name: /sign in/i }).click();
    await page.getByText(/invalid/i).waitFor();

    console.log('Rejected bad password');
  } finally {
    await browser.close();
  }
})();

Run it through the executor:

PW_ARTIFACT_DIR=./playwright-artifacts \
  node "$SKILL_DIR/run.js" "$TMPDIR/playwright-test-login.js"

The skill's value is the saved script. The next run does not need the model to reconstruct the flow.

Prerequisites and footprint

Limits

• Broad permissions. Bash(node:*), Bash(npm:*), Read, and Write are enough to run and persist arbitrary code. Use a sandbox or a disposable checkout.
• No automatic profile isolation beyond a fresh context. CDP attachment deliberately reuses a real profile.
• No automatic cleanup. Scripts and screenshots can outlive the session.
• Generated scripts are not reviewed code. They can contain bad waits, hard-coded secrets, or destructive actions.
• Not a cross-browser matrix by default. Setup installs Chromium; Firefox and WebKit are opt-in.
• Crowded space. Playwright MCP and the DevTools skill already cover adjacent browser work; choose this one for script artifacts.
• No runtime test here. Setup was not run and no browser was launched for this review.

Verify it yourself

1. Read SKILL.md and run.js before setup. Confirm the executor only spawns Node with the skill's module path and your working directory.
2. Run npm run setup in a scratch install and check what it downloads.
3. Run the one-line executor on https://example.com and confirm the browser opens and closes.
4. Test a flow against a disposable local app with test credentials in environment variables.
5. Inspect the temp directory and the artifact directory after the run. Confirm you know what was written.
6. If you need CI, adapt the script to headless mode and a pinned browser version rather than relying on the interactive default.

Review transparency

This is an original guide with short attributed references. It does not reproduce the full skill text.

Related

• Browser Testing with DevTools — inspection and traces through Chrome DevTools MCP
• Playwright MCP Server — tool-based browser control
• Playwright Cursor Rules — idiomatic test rules without runtime
• Verify This — baseline and treatment for browser evidence
• How to Vet an Agent Skill — review the executor and permissions before installing