Playwright Skill

What it does

When your agent uses it

• The user wants to test a website
• Automate browser interactions
• Validate web functionality
• Perform browser-based testing

Example prompts

• “/playwright-skill”

Requirements

• Node.js
• Compatibility (from SKILL.md): Requires Node.js 20+, npm, and network access on first setup to install Playwright and Chromium.
• Pre-approved tools (allowed-tools): Bash(node:*), Bash(npm:*), Read, Write

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

1. 1For localhost work, detect running servers before writing a URL
2. 2Write reusable scripts to $TMP_DIR/playwright-test-*.js unless the user
3. 3Use a visible browser by default. Use headless: true only when requested
4. 4Put the target URL in a constant or environment variable.
5. 5Run scripts with node "$SKILL_DIR/run.js" .
6. 6Report actions, failures, and artifact paths. Do not claim success without

What it can do on your machine

Read from SKILL.md and the folder at commit dd47a6a. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves these tools, so the agent can use them without asking each time:

  • Bash(node:*)
  • Bash(npm:*)
  • Read
  • Write

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Ships script files (JavaScript), which the agent can run.

  Shell commands in SKILL.md call:

  • node
  • npm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names these keys or tokens, usually read from environment variables:

  • TEST_PASSWORD

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

• Compatibility

  Requires Node.js 20+, npm, and network access on first setup to install Playwright and Chromium.

  From compatibility in the SKILL.md frontmatter.

Context cost

Playwright Skill loads about 1.9k tokens when it runs. Until then it costs about 93 tokens; SKILL.md has 513 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~93

When it runs · the whole SKILL.md, loaded when a task matches

~1.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from lackeyjb/playwright-skill at commit dd47a6a, republished under its MIT licence (© lackeyjb). 513 words, ~1,936 tokens.

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.

allowed-tools

Bash(node:*), Bash(npm:*), Read, Write

compatibility

Requires Node.js 20+, npm, and network access on first setup to install Playwright and Chromium.

license

MIT

metadata.author

lackeyjb

metadata.version

5.0.0

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

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('test@example.com');
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');

© lackeyjb, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files in skills/playwright-skill of lackeyjb/playwright-skill.

• SKILL.md
• API_REFERENCE.md
• lib/helpers.js
• package-lock.json
• package.json
• run.js

Open the folder on GitHubat commit dd47a6a