Playwright Automation Agent Skill
Browser automation via Playwright for web testing, screenshots, form filling, scraping, and verification. Use when tasks require navigating websites, interacting with web pages, or testing web applications.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/ArabelaTso/Skills-4-SE --skill playwright-automationThe instruction itself
13 sections, as written by the authorPlaywright Automation
Browser automation skill using Playwright for web testing, verification, data extraction, and interactive workflows. Maintains persistent page state across script executions.
When to Use This Skill
- Testing web applications (navigation, forms, assertions)
- Taking screenshots for visual verification
- Scraping web content or extracting data
- Automating browser workflows (login, form submission)
- Verifying UI changes after code modifications
Approach Selection
- Local/source-available sites: Read source code first to write selectors directly
- Unknown page layouts: Use accessibility snapshots to discover elements
- Visual feedback: Take screenshots to see what the user sees
Core Workflow
Write small, focused scripts — each does ONE thing:
import { chromium } from "playwright";
const browser = await chromium.launch();
const page = await browser.newPage();
// Navigate
await page.goto("https://example.com");
// Wait for page to be ready
await page.waitForLoadState("networkidle");
// Interact
await page.fill('input[name="email"]', "[email protected]");
await page.click('button[type="submit"]');
// Verify
await page.waitForURL("**/dashboard");
const title = await page.title();
console.log({ title, url: page.url() });
// Screenshot
await page.screenshot({ path: "screenshot.png" });
await browser.close();
Key Patterns
Element Discovery with Accessibility Snapshots
// Get accessibility tree to find interactive elements
const snapshot = await page.accessibility.snapshot();
console.log(JSON.stringify(snapshot, null, 2));
Waiting Strategies
await page.waitForLoadState("networkidle"); // Network idle
await page.waitForSelector(".results"); // Specific element
await page.waitForURL("**/success"); // URL pattern
await page.waitForFunction(() => window.ready); // JS condition
Form Interaction
await page.fill('input[name="email"]', "[email protected]");
await page.fill('input[name="password"]', "secret");
await page.click('button[type="submit"]');
await page.waitForNavigation();
Screenshots and PDFs
await page.screenshot({ path: "page.png" });
await page.screenshot({ path: "full.png", fullPage: true });
await page.pdf({ path: "output.pdf" });
Network Interception
await page.route("**/api/**", (route) => {
route.fulfill({ status: 200, body: JSON.stringify({ mock: true }) });
});
Device Emulation
const { devices } = require("playwright");
const iPhone = devices["iPhone 14"];
const context = await browser.newContext({ ...iPhone });
Workflow Loop
For complex tasks, follow this pattern:
- Write a script to perform one action
- Run it and observe the output
- Evaluate — did it work? What's the current state?
- Decide — task complete or need another script?
- Repeat until done
Tips
- Use
networkidlewait state after navigation for reliable page loads - Prefer semantic selectors (
role,text,label) over CSS selectors - Take screenshots at key steps for debugging
- Use
page.evaluate()for browser-context JavaScript (plain JS only, no TypeScript) - For scraping large datasets, intercept network requests rather than scrolling DOM
Inspired by: oh-my-opencode dev-browser skill
Other skills for the same job
different authors, same section of the catalogue
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
Use this skill to query your Google NotebookLM notebooks directly from Claude Code for source-grounded, citation-backed answers from Gemini. Browser automation, library management, persistent auth. Drastically reduced hallucinations through document-only responses.
Complete browser automation with Playwright. Auto-detects dev servers, writes clean test scripts to /tmp. Test pages, fill forms, take screenshots, check responsive design, validate UX, test login flows, check links, automate any browser task. Use when user wants to test websites, automate browser interactions, validate web functionality, or perform any browser-based testing.
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.
Automate Anchor Browser tasks via Rube MCP (Composio). Always search tools first for current schemas.
Automate Browser Tool tasks via Rube MCP (Composio). Always search tools first for current schemas.
Get Image [from] Internet Link - Zero-setup CLI for downloading full-resolution images from iCloud, Dropbox, Google Photos, and Google Drive share links. Four-tier capture strategy, browser automation, HEIC conversion, album support. Node.js/Playwright.
Expert in building browser extensions that solve real problems - Chrome, Firefox, and cross-browser extensions. Covers extension architecture, manifest v3, content scripts, popup UIs, monetization strategies, and Chrome Web Store publishing. Use when: browser extension, chrome extension, firefox addon, extension, manifest v3.
How to use it
Take arabelatso/playwright-automation from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.