Playwright CLI
testdino-hq/playwright-skill
Automates browser interactions for testing and validating your own web applications using playwright-cli.
Take screenshots and interact with web pages using a headed Playwright browser.
$ npx skills add espennilsen/pi --skill playwright -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install espennilsen/pi playwright --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "playwright" agent skill from https://github.com/espennilsen/pi/tree/main/skills/playwright into .claude/skills/playwright/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/espennilsen/pi/tree/main/skills/playwrightType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add espennilsen/pi --skill playwright -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install espennilsen/pi playwright --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/espennilsen/pi.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/playwright .agents/skills/playwright && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "playwright" agent skill from https://github.com/espennilsen/pi/tree/main/skills/playwright into .agents/skills/playwright/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add espennilsen/pi --skill playwright -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install espennilsen/pi playwright --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/espennilsen/pi.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/playwright .cursor/skills/playwright && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "playwright" agent skill from https://github.com/espennilsen/pi/tree/main/skills/playwright into .cursor/skills/playwright/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/espennilsen/pi.git --path skills/playwright--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add espennilsen/pi --skill playwright -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install espennilsen/pi playwright --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/espennilsen/pi.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/playwright .gemini/skills/playwright && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "playwright" agent skill from https://github.com/espennilsen/pi/tree/main/skills/playwright into .gemini/skills/playwright/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install espennilsen/pi playwrightInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add espennilsen/pi --skill playwright -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/espennilsen/pi.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/playwright .github/skills/playwright && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "playwright" agent skill from https://github.com/espennilsen/pi/tree/main/skills/playwright into .github/skills/playwright/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add espennilsen/pi --skill playwright -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install espennilsen/pi playwright --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/espennilsen/pi.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/playwright .opencode/skills/playwright && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "playwright" agent skill from https://github.com/espennilsen/pi/tree/main/skills/playwright into .opencode/skills/playwright/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "playwright", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
playwrightTake 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. 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.
Read from SKILL.md and the folder at commit 79d019b. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
nodeFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from espennilsen/pi at commit 79d019b, republished under its MIT licence (© espennilsen). 324 words, ~1,605 tokens.
.claude/skills/playwright/SKILL.md (or your agent's skills folder).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.
Playwright is installed at /Users/espen/node_modules/playwright.
When writing scripts, always require from the absolute path:
const { chromium } = require('/Users/espen/node_modules/playwright');Write a .cjs script to /tmp/, run it with node, then read the resulting PNG.
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();
}
})();node /tmp/screenshot.cjsThen view it:
read /tmp/screenshot.pngheadless: falseMany SPAs (Penpot, React apps, ClojureScript apps) fail or render blank in headless mode. Always launch headed:
chromium.launch({ headless: false }).cjs)Write scripts as .cjs files with require(). ESM imports fail because
Playwright isn't in the local node_modules:
// ✅ Works
const { chromium } = require('/Users/espen/node_modules/playwright');
// ❌ Fails — "Cannot find package 'playwright'"
import { chromium } from 'playwright';SPAs need time to hydrate after the initial HTML loads. Always add a wait:
| Site type | Wait time |
|---|---|
| Static HTML | 1-2 seconds |
| Simple SPA (React, Svelte) | 3-4 seconds |
| Complex SPA (Penpot, Figma) | 6-8 seconds |
await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
await page.waitForTimeout(6000); // adjust per site typeUse waitUntil: 'domcontentloaded' instead of 'networkidle' — network-idle
can time out on SPAs that keep WebSocket connections open.
Always save screenshots and scripts to /tmp/ to avoid polluting the workspace:
await page.screenshot({ path: '/tmp/my-screenshot.png' });const context = await browser.newContext({ viewport: { width: 1400, height: 1000 } });
const page = await context.newPage();const { devices } = require('/Users/espen/node_modules/playwright');
const iPhone = devices['iPhone 15'];
const context = await browser.newContext({ ...iPhone });| Use case | Width × Height |
|---|---|
| Desktop (default) | 1400 × 1000 |
| Mobile | 390 × 844 |
| Tablet | 768 × 1024 |
| Wide | 1920 × 1080 |
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));await page.hover('.card');
await page.waitForTimeout(500);
await page.screenshot({ path: '/tmp/card-hover.png' });await page.waitForSelector('.loaded-content', { timeout: 10000 });Loop over multiple URLs and save each:
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` });
}For pages that require authentication:
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();| Symptom | Cause | Fix |
|---|---|---|
| "Internal Error" / blank page | Headless mode | Use headless: false |
| "Cannot find package" | ESM import or wrong cwd | Use absolute require() path, .cjs extension |
| Black / empty screenshot | SPA not rendered yet | Increase waitForTimeout |
| Timeout on goto | networkidle on WebSocket app | Switch to domcontentloaded |
| Wrong page content | Auth required | Set cookies or use share link |
| Blurry screenshots | Low DPR | Set deviceScaleFactor: 2 in context |
When a page isn't rendering as expected, capture console output:
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
Just SKILL.md in skills/playwright of espennilsen/pi.
Open the folder on GitHubat commit 79d019b
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Playwright this skillespennilsen/pi | 122 | — | ~1.6k | Automated safety check: Pass | MIT | |
| Playwright CLItestdino-hq/playwright-skill | 386 | 1 repos | ~2.5k | Automated safety check: Pass | MIT | |
| Agenttinyfish-io/tinyfish-cookbook | 2.2k | — | ~1.1k | Automated safety check: Pass | MIT | |
| Playwright SkillAratKruglik/claude-laravel | 155 | 10 repos | ~3.5k | Automated safety check: Pass | None | |
| Playwright MCPCraftOS-dev/CraftBot | 392 | 1 repos | ~1k | Automated safety check: Pass | MIT | |
| Browsing With Playwrightaiskillstore/marketplace | 430 | — | ~1.2k | Automated safety check: Pass | None |
testdino-hq/playwright-skill
Automates browser interactions for testing and validating your own web applications using playwright-cli.
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…
AratKruglik/claude-laravel
Complete browser automation with Playwright. An agent skill from AratKruglik/claude-laravel.
CraftOS-dev/CraftBot
Browser automation via Playwright MCP server. An agent skill from CraftOS-dev/CraftBot.
aiskillstore/marketplace
Browser automation using Playwright MCP. An agent skill from aiskillstore/marketplace.
ArabelaTso/Skills-4-SE
Browser automation via Playwright for web testing, screenshots, form filling, scraping, and verification.
espennilsen/pi
Interact with GitHub repos, PRs, issues, CI, and notifications via the pi-github extension commands and gh CLI.
espennilsen/pi
Create, review, and improve skills for Pi agents. An agent skill from espennilsen/pi.
espennilsen/pi
Perform a comprehensive DRY (Don't Repeat Yourself) code review on a codebase.
espennilsen/pi
Reverse-engineer a design system from a live website (public URL or localhost).
espennilsen/pi
A skill your agent uses when inspecting or operating Herdr sessions, workspaces, tabs, panes, agents, terminal output, agent messaging, or waits.
espennilsen/pi
Read and extract content from PDF files — text, tables, metadata, and images.
Works with
Categories
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.
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.
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.
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.
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.
Going by SKILL.md and its folder, Playwright needs the command-line tools its instructions call (node).
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.
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.
Playwright is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
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.
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.
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.