playwright-automation

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();