playwright-skill skill | PlugMCP

playwright-skill

by lackeyjb3.2k

Install

Use withClaudeCursorCodex

The file stays in the publisher's repository. PlugMCP does not host or rewrite it.

Download skill skills/playwright-skill/SKILL.md on GitHub

Related skills

View all

P
playwright-skillGeneral-purpose Playwright automation for coding agents

Complete browser automation with Playwright. Auto-detects dev servers, writes reusable test scripts, and supports screenshots, responsive checks, UX validation, login flows, link checks, and arbitrary browser automation. Use when the user wants to test a website, automate browser interactions, validate web functionality, or perform browser-based testing.

name: playwright-skill description: Complete browser automation with Playwright. Auto-detects dev servers, writes reusable test scripts, and supports screenshots, responsive checks, UX validation, login flows, link checks, and arbitrary browser automation. Use when the user wants to test a website, automate browser interactions, validate web functionality, or perform browser-based testing. license: MIT compatibility: Requires Node.js 20+, npm, and network access on first setup to install Playwright and Chromium. metadata: author: lackeyjb version: "5.0.0" allowed-tools: Bash(node:) Bash(npm:) Read Write

Playwright Browser Automation

Write and execute focused Playwright scripts for the user's request. Prefer the skill's executor and helpers, but use the full Playwright API when needed.

Path resolution

This skill can be installed in several locations, so resolve its directory first. Set SKILL_DIR to the directory containing this SKILL.md file, then run the commands below as written:

export SKILL_DIR=<absolute path of the directory containing this SKILL.md>
export TMP_DIR="$(node -p 'require("node:os").tmpdir()')"

If shell state does not persist between commands, substitute the literal paths for $SKILL_DIR and $TMP_DIR in each command instead.

Common installation paths:

Plugin system:

~/.claude/plugins/marketplaces/playwright-skill/skills/playwright-skill

For localhost work, detect running servers before writing a URL:
```
node -e "require('$SKILL_DIR/lib/helpers').detectDevServers().then(s => console.log(JSON.stringify(s)))"
```
Use the only result automatically. Ask which URL to use when there are multiple results. Ask for a URL or offer to start a server when none exist.
Write reusable scripts to $TMP_DIR/playwright-test-*.js unless the user asks to save them in the project. Use PW_SCRIPT_DIR to preserve scripts.
Use a visible browser by default. Use headless: true only when requested or when the environment has no display.
Put the target URL in a constant or environment variable.
Run scripts with node "$SKILL_DIR/run.js" <script.js>.
Report actions, failures, and artifact paths. Do not claim success without checking the resulting page.

cd "$SKILL_DIR" && npm run setup

const os = require('node:os');
const path = require('node:path');
const { chromium } = require('playwright');

const targetUrl = process.env.TARGET_URL || 'http://localhost:3000';
const artifactDir = process.env.PW_ARTIFACT_DIR || os.tmpdir();

(async () => {
  const browser = await chromium.launch({ headless: false });
  try {
    const page = await browser.newPage();
    await page.goto(targetUrl);
    console.log('Page loaded:', await page.title());
    await page.screenshot({ path: path.join(artifactDir, 'page.png'), fullPage: true });
  } finally {
    await browser.close();
  }
})();

node "$SKILL_DIR/run.js" "$TMP_DIR/playwright-test-page.js"

node "$SKILL_DIR/run.js" -e "const browser = await chromium.launch({headless: false}); try { const page = await browser.newPage(); await page.goto('https://example.com'); console.log(await page.title()); } finally { await browser.close(); }"

await page.getByLabel('Email').fill('[email protected]');
await page.getByRole('button', { name: 'Sign in' }).click();
await page.waitForURL('**/dashboard');
await page.getByRole('heading', { name: 'Dashboard' }).waitFor();

{
  const os = require('node:os');
  const path = require('node:path');

  const artifactDir = process.env.PW_ARTIFACT_DIR || os.tmpdir();
  const viewports = [
    { name: 'desktop', width: 1440, height: 900 },
    { name: 'mobile', width: 390, height: 844 },
  ];

  for (const viewport of viewports) {
    await page.setViewportSize(viewport);
    await page.goto(targetUrl);
    await page.screenshot({ path: path.join(artifactDir, `${viewport.name}.png`), fullPage: true });
  }
}

await page.goto(`${targetUrl}/login`);
await page.getByLabel('Email').fill(process.env.TEST_EMAIL);
await page.getByLabel('Password').fill(process.env.TEST_PASSWORD);
await page.getByRole('button', { name: /sign in|log in/i }).click();
await page.waitForURL('**/dashboard');
await page.getByRole('heading', { name: /dashboard/i }).waitFor();

PW_SCRIPT_DIR=./playwright-tests node "$SKILL_DIR/run.js" "$TMP_DIR/playwright-test-login.js"
PW_ARTIFACT_DIR=./playwright-artifacts node "$SKILL_DIR/run.js" "$TMP_DIR/playwright-test-page.js"

const browser = await chromium.connectOverCDP('http://127.0.0.1:9222');
const page = browser.contexts()[0].pages()[0];

const helpers = require(`${process.env.PW_SKILL_DIR}/lib/helpers`);

const servers = await helpers.detectDevServers();
const browser = await helpers.launchBrowser('chromium');
const context = await helpers.createContext(browser);
const page = await context.newPage();
await helpers.handleCookieBanner(page);
await helpers.takeScreenshot(page, 'result');

playwright-skill

Install

Related skills

Playwright Browser Automation

Path resolution

Workflow

Setup

Minimal example

Current Playwright patterns

Common tasks

Responsive checks

Login flow

Save scripts and artifacts

Connect to an existing Chrome session

Helpers

Configuration