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"]', "user@example.com");
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"]', "user@example.com");
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 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

playwright-automation