playwright-automation

name	playwright-automation
description	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.

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"]', "[e-mail]");
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"]', "[e-mail]");
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:

1. Write a script to perform one action
2. Run it and observe the output
3. Evaluate — did it work? What's the current state?
4. Decide — task complete or need another script?
5. Repeat until done

Tips

• Use networkidle wait 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