Agent skill

Playwright

by espennilsen in espennilsen/pi

Take screenshots and interact with web pages using a headed Playwright browser.

MITAuto-check passedTesting & QA

Install Playwright

skills CLI
$ npx skills add espennilsen/pi --skill playwright -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install espennilsen/pi playwright --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/espennilsen/pi.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/playwright .claude/skills/playwright && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
playwright
GitHub stars
122
Token cost
~1.6k tokens
SKILL.md length
324 words
Files
1
Skills in repo
36
Repo updated
First seen
Licence
MIT

At a glance

Take screenshots and interact with web pages using a headed Playwright browser.

  • You need to visually inspect a URL
  • SKILL.md covers Setup, Quick Screenshot, Key Rules and Viewport & Device Emulation, plus 5 more sections
  • Calls node
  • Capture a screenshot

What it does

Playwright is an agent skill from espennilsen/pi. Take screenshots and interact with web pages using a headed Playwright browser. Use when you need to visually inspect a URL, capture a screenshot, interact with a page (click, type, scroll), or verify what a page looks like rendered. Triggers — use this skill when: - You need to screenshot a URL (Penpot share link, localhost, public site) - User says "show me", "how does it look", "take a screenshot" - You want to visually verify your own work (e.g. after creating Penpot designs) - User asks to review a live page…

Its SKILL.md is about 1.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Testing & QA, covering Browser testing, Forms and invoices and Browser automation. It works with Playwright. The licence is MIT.

When your agent uses it

  • You need to visually inspect a URL
  • Capture a screenshot
  • Interact with a page (click
  • Verify what a page looks like rendered

Example prompts

  • “show me”
  • “how does it look”
  • “take a screenshot”
  • “/playwright”

What it can do on your machine

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

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • node

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

  • Network

    No URLs in SKILL.md.

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

  • Credentials

    Names no API keys, tokens, secrets or passwords.

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

Context cost

Playwright loads about 1.6k tokens when it runs. Until then it costs about 156 tokens; SKILL.md has 324 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~156
When it runs · the whole SKILL.md, loaded when a task matches
~1.6k

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

Auto-check passed

The automated check found no risky patterns in SKILL.md.

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 espennilsen/pi at commit 79d019b, republished under its MIT licence (© espennilsen). 324 words, ~1,605 tokens.

Download SKILL.mdSave it as .claude/skills/playwright/SKILL.md (or your agent's skills folder).
name
playwright
description
Take screenshots and interact with web pages using a headed Playwright browser. Use when you need to visually inspect a URL, capture a screenshot, interact with a page (click, type, scroll), or verify what a page looks like rendered. **Triggers — use this skill when:** - You need to screenshot a URL (Penpot share link, localhost, public site) - User says "show me", "how does it look", "take a screenshot" - You want to visually verify your own work (e.g. after creating Penpot designs) - User asks to review a live page or prototype - You need to interact with a page (click buttons, fill forms, trigger states)

Playwright — Browser Screenshots & Interaction

Use Playwright to open a real browser, navigate to URLs, take screenshots, and interact with pages. This is the go-to approach for visual verification of any web content — Penpot designs, local dev servers, production sites, etc.

Setup

Playwright is installed at /Users/espen/node_modules/playwright.

When writing scripts, always require from the absolute path:

javascript
const { chromium } = require('/Users/espen/node_modules/playwright');

Quick Screenshot

Write a .cjs script to /tmp/, run it with node, then read the resulting PNG.

javascript
const { chromium } = require('/Users/espen/node_modules/playwright');

(async () => {
  const browser = await chromium.launch({ headless: false });
  try {
    const page = await browser.newPage();
    await page.goto('https://example.com', { waitUntil: 'domcontentloaded', timeout: 30000 });
    await page.waitForTimeout(3000);
    await page.screenshot({ path: '/tmp/screenshot.png' });
  } finally {
    await browser.close();
  }
})();
bash
node /tmp/screenshot.cjs

Then view it:

read /tmp/screenshot.png

Key Rules

Always use headless: false

Many SPAs (Penpot, React apps, ClojureScript apps) fail or render blank in headless mode. Always launch headed:

javascript
chromium.launch({ headless: false })
Always use CommonJS (.cjs)

Write scripts as .cjs files with require(). ESM imports fail because Playwright isn't in the local node_modules:

javascript
// ✅ Works
const { chromium } = require('/Users/espen/node_modules/playwright');

// ❌ Fails — "Cannot find package 'playwright'"
import { chromium } from 'playwright';
Wait for SPA rendering

SPAs need time to hydrate after the initial HTML loads. Always add a wait:

Site typeWait time
Static HTML1-2 seconds
Simple SPA (React, Svelte)3-4 seconds
Complex SPA (Penpot, Figma)6-8 seconds
javascript
await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
await page.waitForTimeout(6000); // adjust per site type

Use waitUntil: 'domcontentloaded' instead of 'networkidle' — network-idle can time out on SPAs that keep WebSocket connections open.

Write to /tmp

Always save screenshots and scripts to /tmp/ to avoid polluting the workspace:

javascript
await page.screenshot({ path: '/tmp/my-screenshot.png' });

Viewport & Device Emulation

Custom viewport
javascript
const context = await browser.newContext({ viewport: { width: 1400, height: 1000 } });
const page = await context.newPage();
Mobile device
javascript
const { devices } = require('/Users/espen/node_modules/playwright');
const iPhone = devices['iPhone 15'];
const context = await browser.newContext({ ...iPhone });
Common viewports
Use caseWidth × Height
Desktop (default)1400 × 1000
Mobile390 × 844
Tablet768 × 1024
Wide1920 × 1080

Interactions

Click, type, scroll
javascript
await page.click('button.submit');
await page.fill('input[name="email"]', 'test@example.com');
await page.keyboard.press('Enter');
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
Hover states
javascript
await page.hover('.card');
await page.waitForTimeout(500);
await page.screenshot({ path: '/tmp/card-hover.png' });
Wait for specific elements
javascript
await page.waitForSelector('.loaded-content', { timeout: 10000 });

Multi-Page Screenshots

Loop over multiple URLs and save each:

javascript
const pages_to_capture = [
  { url: 'https://example.com/', name: 'home' },
  { url: 'https://example.com/about', name: 'about' },
];

for (const p of pages_to_capture) {
  await page.goto(p.url, { waitUntil: 'domcontentloaded', timeout: 30000 });
  await page.waitForTimeout(3000);
  await page.screenshot({ path: `/tmp/${p.name}.png` });
}

Setting Cookies / Auth

For pages that require authentication:

javascript
const context = await browser.newContext({ viewport: { width: 1400, height: 1000 } });
await context.addCookies([{
  name: 'auth-token',
  value: 'your-token-here',
  domain: 'example.com',
  path: '/',
}]);
const page = await context.newPage();

Troubleshooting

SymptomCauseFix
"Internal Error" / blank pageHeadless modeUse headless: false
"Cannot find package"ESM import or wrong cwdUse absolute require() path, .cjs extension
Black / empty screenshotSPA not rendered yetIncrease waitForTimeout
Timeout on gotonetworkidle on WebSocket appSwitch to domcontentloaded
Wrong page contentAuth requiredSet cookies or use share link
Blurry screenshotsLow DPRSet deviceScaleFactor: 2 in context

Full Example — Screenshot with Console Debugging

When a page isn't rendering as expected, capture console output:

javascript
const { chromium } = require('/Users/espen/node_modules/playwright');

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

    page.on('console', msg => {
      if (msg.type() === 'error') console.log('CONSOLE ERROR:', msg.text());
    });
    page.on('pageerror', err => console.log('PAGE ERROR:', err.message));

    await page.goto('https://example.com', { waitUntil: 'domcontentloaded', timeout: 30000 });
    await page.waitForTimeout(4000);

    const title = await page.title();
    console.log('Title:', title);

    await page.screenshot({ path: '/tmp/debug.png' });
  } finally {
    await browser.close();
  }
})();

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

Files

Just SKILL.md in skills/playwright of espennilsen/pi.

Open the folder on GitHubat commit 79d019b

Compare with similar skills

Playwright next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Playwright compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Playwright this skillespennilsen/pi122—~1.6kAutomated safety check: PassMIT
Playwright CLItestdino-hq/playwright-skill3861 repos~2.5kAutomated safety check: PassMIT
Agenttinyfish-io/tinyfish-cookbook2.2k—~1.1kAutomated safety check: PassMIT
Playwright SkillAratKruglik/claude-laravel15510 repos~3.5kAutomated safety check: PassNone
Playwright MCPCraftOS-dev/CraftBot3921 repos~1kAutomated safety check: PassMIT
Browsing With Playwrightaiskillstore/marketplace430—~1.2kAutomated safety check: PassNone

Similar skills

  • Playwright CLI

    testdino-hq/playwright-skill

    Automates browser interactions for testing and validating your own web applications using playwright-cli.

    386 GitHub starsUsed in 1 repo~2.5k tokens
    Testing & QAAuto-check passed
  • Agent

    tinyfish-io/tinyfish-cookbook

    Default browser automation agent — click, fill forms, navigate, log in, and extract structured data from any website using a natural-language goal, or run the same task across multiple sites in…

    2.2k GitHub stars~1.1k tokensUpdated 6 days ago
    Testing & QAAuto-check passed
  • Playwright Skill

    AratKruglik/claude-laravel

    Complete browser automation with Playwright. An agent skill from AratKruglik/claude-laravel.

    155 GitHub starsUsed in 10 repos~3.5k tokens
    Testing & QAAuto-check passed
  • Playwright MCP

    CraftOS-dev/CraftBot

    Browser automation via Playwright MCP server. An agent skill from CraftOS-dev/CraftBot.

    392 GitHub starsUsed in 1 repo~1k tokens
    Testing & QAAuto-check passed
  • Browsing With Playwright

    aiskillstore/marketplace

    Browser automation using Playwright MCP. An agent skill from aiskillstore/marketplace.

    430 GitHub stars~1.2k tokensUpdated today
    Testing & QAAuto-check passed
  • Playwright Automation

    ArabelaTso/Skills-4-SE

    Browser automation via Playwright for web testing, screenshots, form filling, scraping, and verification.

    253 GitHub stars~930 tokensUpdated 1 mo ago
    Testing & QAAuto-check passed

More from espennilsen/pi

All 36 skills in this repo
  • GitHub

    espennilsen/pi

    Interact with GitHub repos, PRs, issues, CI, and notifications via the pi-github extension commands and gh CLI.

    122 GitHub stars~1k tokensUpdated 16 days ago
    Auto-check passed
  • Skill Creator

    espennilsen/pi

    Create, review, and improve skills for Pi agents. An agent skill from espennilsen/pi.

    122 GitHub stars~2.1k tokensUpdated 16 days ago
    Auto-check passed
  • Dry Code Review

    espennilsen/pi

    Perform a comprehensive DRY (Don't Repeat Yourself) code review on a codebase.

    122 GitHub stars~1.7k tokensUpdated 16 days ago
    Auto-check passed
  • Extract Design System

    espennilsen/pi

    Reverse-engineer a design system from a live website (public URL or localhost).

    122 GitHub stars~2k tokensUpdated 16 days ago
    Auto-check passed
  • Herdr Operations

    espennilsen/pi

    A skill your agent uses when inspecting or operating Herdr sessions, workspaces, tabs, panes, agents, terminal output, agent messaging, or waits.

    122 GitHub starsUsed in 1 repo~525 tokens
    Auto-check passed
  • PDF Reader

    espennilsen/pi

    Read and extract content from PDF files — text, tables, metadata, and images.

    122 GitHub stars~1.6k tokensUpdated 16 days ago
    Auto-check passed

Works with

Categories

Questions about Playwright

What does Playwright do?

Take screenshots and interact with web pages using a headed Playwright browser. Playwright is an agent skill from espennilsen/pi. Take screenshots and interact with web pages using a headed Playwright browser.

When should I use Playwright?

Playwright fits situations like: you need to visually inspect a URL; capture a screenshot; interact with a page (click; verify what a page looks like rendered.

How do I install Playwright in Claude Code?

Run `npx skills add espennilsen/pi --skill playwright -a claude-code`. Or copy the skill folder (skills/playwright in espennilsen/pi) into .claude/skills/playwright in your project. Claude Code loads it when a task matches its description.

How do I install Playwright in Codex?

Run `npx skills add espennilsen/pi --skill playwright -a codex`. Or copy the skill folder (skills/playwright in espennilsen/pi) into .agents/skills/playwright in your project. Codex loads it when a task matches its description.

Can I use Playwright in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add espennilsen/pi --skill playwright -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/playwright, .gemini/skills/playwright, .github/skills/playwright and .opencode/skills/playwright in your project.

What does Playwright need to run?

Going by SKILL.md and its folder, Playwright needs the command-line tools its instructions call (node).

Does Playwright access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Playwright safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Playwright use?

Playwright is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Playwright use?

About 1.6k tokens (SKILL.md is roughly 6.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Playwright?

Skills that share tags, products or a category with Playwright: Playwright CLI (testdino-hq/playwright-skill, 386 stars), Agent (tinyfish-io/tinyfish-cookbook, 2.2k stars), Playwright Skill (AratKruglik/claude-laravel, 155 stars) and Playwright MCP (CraftOS-dev/CraftBot, 392 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Playwright?

espennilsen (a GitHub user) maintains it in espennilsen/pi, which has 122 GitHub stars. The repository holds 36 skills in this directory. The repository was last updated on September 21, 2026.

Source: espennilsen/pi on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.