Agent skill
playwright-automation
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 this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/playwright-automation-arabelatso-skills-4-se
SKILL.md
Playwright 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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?