Playwright

Playwright — Browser Automation Skill

Intelligent browser automation executor. Analyzes the user's request, selects the optimal pattern from 30+ built-in templates, generates production-grade Playwright code, and executes it with real-time reporting.

Setup

Playwright must be available in the environment. If not installed:

npm init -y
npm install playwright @playwright/test
npx playwright install chromium

For all 3 browsers:

npx playwright install

Check what's installed:

npx playwright install --dry-run

Trigger Decision Tree

When user asks for browser automation, classify the task:

User request
├── "screenshot" / "capture" / "take a picture"
│   → screenshot template
├── "responsive" / "mobile" / "different sizes"
│   → responsive check + per-viewport screenshots
├── "login" / "sign in" / "authenticate"
│   → login flow with error detection
├── "form" / "fill" / "submit" / "input"
│   → form testing with validation check
├── "broken links" / "check links" / "link validation"
│   → broken link scanner
├── "scrape" / "extract" / "get data" / "crawl"
│   → data extraction (single page or crawl)
├── "mock" / "intercept" / "stub" / "fake api"
│   → API mocking with route interception
├── "accessibility" / "a11y" / "axe" / "wcag"
│   → accessibility audit (requires axe-core)
├── "performance" / "lighthouse" / "speed" / "load time"
│   → performance audit with budgets
├── "visual" / "visual regression" / "diff"
│   → visual comparison screenshots
├── "download" / "file download"
│   → file download handler
├── "console" / "errors" / "logs"
│   → console error detector
├── "pdf" / "generate pdf"
│   → page-to-PDF converter
└── else → generic browse + report

Workflow

Step 1: Detect the environment

Before writing any code, determine what's available:

• Dev servers: Check common ports (3000, 3001, 5173, 8080, 8000, 4200, 5000, 9000) for running processes
• Installed browsers: Run npx playwright install --dry-run to see which browsers are available
• Framework indicators: Look for package.json dependencies (react, vue, svelte, next, nuxt) to understand the app under test
• Available credentials: Check if the user mentioned login credentials or has .env files

Step 2: Select template + generate code

Based on task classification and environment info, select the appropriate template and customize it with:

• Detected URL (dev server or user-supplied)
• Any user-specific parameters (credentials, selectors, viewports)
• Best-practice patterns auto-inserted (waitForSelector instead of fixed waits, graceful error handling, cleanup in finally)

Rules for code generation:

• Use getByRole / getByText / getByLabel over CSS selectors (stable, accessible)
• Parameterize URL in TARGET_URL constant at top
• Never use waitForTimeout for conditions — use waitForSelector, waitForURL, waitForResponse
• Always wrap in try/catch/finally with browser.close() in finally
• Include console.error logging at each step
• Comment each logical block
• Write generated file to OS temp dir as playwright-task-{timestamp}.js

Step 3: Execute

Run the generated script directly with Node:

node <path-to-generated-file>

For inline one-off tasks (quick screenshot, check title):

node -e "
const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('$URL');
  console.log('Title:', await page.title());
  await browser.close();
})();
"

Step 4: Report results

Present results based on task type:

Smart Defaults

These are applied automatically to every generated script:

Important Rules

• No hardcoded URLs: Always parameterize as TARGET_URL
• No fixed waits: Use waitForSelector, waitForURL, waitForResponse, waitForLoadState
• Auth state reuse: Save to .auth/ directory for multi-step flows
• Temp files only: Write scripts to OS temp dir, never to project or skill dir
• Failure screenshots: Always capture on error for debugging
• Close browser: Always browser.close() in finally block

Error Recovery

Common Fast Patterns

Quick screenshot

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();
  await page.setViewportSize({ width: 1920, height: 1080 });
  await page.goto(TARGET_URL, { waitUntil: 'networkidle' });
  await page.screenshot({ path: `${require('os').tmpdir()}/screenshot.png`, fullPage: true });
  console.log('Screenshot saved to temp/screenshot.png');
  await browser.close();
})();

Quick page info

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(TARGET_URL);
  console.log('Title:', await page.title());
  console.log('URL:', page.url());
  const meta = await page.$('meta[name="description"]');
  console.log('Meta description:', meta ? await meta.getAttribute('content') : 'N/A');
  await browser.close();
})();

Quick form test

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(TARGET_URL);
  const inputs = await page.locator('input, textarea, select').count();
  const buttons = await page.locator('button, input[type="submit"]').count();
  console.log(`Form has ${inputs} inputs and ${buttons} buttons`);
  await browser.close();
})();

Advanced Patterns

Login flow with auth state reuse

const { chromium } = require('playwright');
const path = require('path');
const AUTH_FILE = path.join(__dirname, '.auth', 'state.json');

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();

  // Try to reuse saved auth state
  try {
    const state = require(AUTH_FILE);
    await context.addCookies(state.cookies);
  } catch {}

  const page = await context.newPage();
  await page.goto(TARGET_URL);

  // Check if logged in
  const isLoggedIn = await page.$('[data-logged-in]');
  if (!isLoggedIn) {
    await page.fill('[name="username"]', USERNAME);
    await page.fill('[name="password"]', PASSWORD);
    await page.click('button[type="submit"]');
    await page.waitForURL('**/dashboard');
    // Save auth state
    const cookies = await context.cookies();
    require('fs').writeFileSync(AUTH_FILE, JSON.stringify({ cookies }, null, 2));
  }

  // Continue with authenticated actions...
  await browser.close();
})();

API mocking with route interception

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

(async () => {
  const browser = await chromium.launch({ headless: false });
  const context = await browser.newContext();
  const page = await context.newPage();

  // Mock API responses
  await page.route('**/api/users', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify([{ id: 1, name: 'Test User' }])
    });
  });

  // Block analytics/tracking requests
  await page.route(/google-analytics|facebook|gtag/, route => route.abort());

  await page.goto(TARGET_URL);
  // Test with mocked data...
  await browser.close();
})();

Accessibility audit (requires axe-core)

npm install @axe-core/playwright

const { chromium } = require('playwright');
const { injectAxe, checkA11y } = require('@axe-core/playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(TARGET_URL);
  await injectAxe(page);
  const results = await checkA11y(page, null, {
    detailedReport: true,
    detailedReportOptions: { html: true }
  });
  console.log(`Violations: ${results.violations.length}`);
  results.violations.forEach(v => console.log(`- ${v.help}: ${v.nodes.length} instances`));
  await browser.close();
})();

Anti-Patterns

Error Handling

Playwright-specific errors and remedies

Checklist

• Locator uses getByRole, getByText, or getByTestId — never XPath or CSS selectors with fragile class names
• Auto-waiting relied on (no manual waitForTimeout or sleep)
• Test isolates state (clean DB or API mock per test)
• Cross-browser tested (Chromium + Firefox + WebKit) for critical flows
• Trace viewer enabled on failure for debugging CI flakes

Sources

• Playwright official documentation (playwright.dev) — locator strategies, auto-waiting, fixtures
• Testing Trophy methodology — 80% integration / 20% unit testing ratio
• @axe-core/playwright for accessibility audits
• Lighthouse CI for performance budgets
• Production E2E patterns from 30+ project codebases