Playwright Browser Automation Skill

Description

This skill uses Playwright to automate browser interactions. It handles navigation, form filling, clicking, waiting for elements, taking screenshots, and asserting page state. Essential for e2e testing, visual verification, and web scraping.

Instructions

When the user needs browser automation, use Playwright with these patterns:

Setup

Copy
# Install Playwright
npm install playwright
npx playwright install chromium  # Install browser binary

Basic Navigation & Interaction

Copy
const { chromium } = require('playwright');

const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({
  viewport: { width: 1280, height: 720 },
  userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) ...'
});
const page = await context.newPage();

// Navigate
await page.goto('https://example.com', { waitUntil: 'networkidle' });

// Click a button
await page.click('button[data-testid="submit"]');

// Fill a form
await page.fill('input[name="email"]', '[email protected]');
await page.fill('input[name="password"]', 'password123');
await page.click('button[type="submit"]');

// Wait for navigation
await page.waitForURL('**/dashboard');

// Take screenshot
await page.screenshot({ path: 'dashboard.png', fullPage: true });

await browser.close();

Waiting Strategies

Copy
// Wait for element to appear
await page.waitForSelector('.notification', { state: 'visible' });

// Wait for text content
await page.waitForSelector('text=Success');

// Wait for network request to complete
await page.waitForResponse(resp =>
  resp.url().includes('/api/data') && resp.status() === 200
);

// Wait for page load state
await page.waitForLoadState('networkidle');

Extracting Data

Copy
// Get text content
const title = await page.textContent('h1');

// Get attribute
const href = await page.getAttribute('a.link', 'href');

// Get all items from a list
const items = await page.$$eval('.list-item', els =>
  els.map(el => ({
    title: el.querySelector('h3')?.textContent,
    price: el.querySelector('.price')?.textContent,
  }))
);

// Evaluate JavaScript in page context
const data = await page.evaluate(() => {
  return JSON.parse(localStorage.getItem('appState') || '{}');
});

E2E Test Pattern

Copy
const { test, expect } = require('@playwright/test');

test('user can log in and see dashboard', async ({ page }) => {
  await page.goto('/login');

  await page.fill('[data-testid="email"]', '[email protected]');
  await page.fill('[data-testid="password"]', 'password');
  await page.click('[data-testid="login-button"]');

  await expect(page).toHaveURL(/dashboard/);
  await expect(page.locator('h1')).toHaveText('Welcome back');
  await expect(page.locator('.stats-card')).toHaveCount(4);
});

Handling Modals & Dialogs

Copy
// Handle browser dialog (alert, confirm, prompt)
page.on('dialog', async dialog => {
  console.log(dialog.message());
  await dialog.accept();
});

// Click button that opens modal, then interact with modal
await page.click('button.open-modal');
await page.waitForSelector('.modal', { state: 'visible' });
await page.fill('.modal input', 'data');
await page.click('.modal button.confirm');
await page.waitForSelector('.modal', { state: 'hidden' });

Rules

• Always install Playwright and browser binaries before first use
• Use headless: true for automated tasks, headless: false for debugging
• Prefer data-testid selectors over CSS classes (more stable)
• Always use explicit waits (waitForSelector, waitForURL) — never sleep()
• Close the browser in a finally block to prevent zombie processes
• Set reasonable timeouts (default is 30s, override with { timeout: 5000 })
• For authenticated flows, save and reuse storageState to avoid repeated logins
• Screenshots should include timestamps or descriptive names
• Handle cookie consent banners and popups explicitly in your scripts

Examples

User: Test the login flow of my app Action: Launch browser, navigate to login, fill credentials, submit, verify redirect and dashboard content

User: Take a screenshot of this URL Action: Launch headless browser, navigate, wait for load, capture full-page screenshot

User: Scrape product prices from this page Action: Navigate, extract data with $$eval, return structured results