playwright-cli-automation

Playwright Screenshot Capture with CLI

Capture full-page screenshots, navigate authentication flows, run Lighthouse audits, and test responsive design using playwright-cli commands. No code writing required.

When to Use

• Capture screenshots for accessibility audits (feed to /design-eval:audit-accessibility)
• Navigate login flows and capture authenticated pages
• Run Lighthouse accessibility/performance reports
• Test responsive design across mobile, tablet, desktop
• Generate before/after comparisons at specific viewports
• Automate screenshot capture without writing Playwright code

Key Features

• CLI-based — No JavaScript code to write or maintain
• Full-page captures — Entire page content, not just viewport
• Lighthouse integration — Built-in accessibility and performance audits
• Authentication support — Fill forms, submit, navigate authenticated flows
• Fixed viewports — Consistent sizes across runs (mobile, tablet, desktop)
• Snapshot management — Auto-generated snapshots for debugging
• Session persistence — Save/load browser state for multi-step flows

Quick Start

Basic Capture (Desktop)

# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli

# Open browser and navigate
playwright-cli open http://localhost:8787

# Take screenshot (saves to .playwright-cli/page-*.png)
playwright-cli screenshot --filename=.playwright-cli/login-page.png

# Close browser
playwright-cli close

Capture with Lighthouse Audit

# Create .playwright-cli directory if it doesn't exist
mkdir -p .playwright-cli

# Open browser
playwright-cli open http://localhost:8787

# Get page snapshot for reference
playwright-cli snapshot --filename=.playwright-cli/before-audit.yaml

# Run Lighthouse audit (accessibility + performance)
playwright-cli run-code "async page => {
  const result = await page.evaluate(() => {
    return {
      url: window.location.href,
      title: document.title,
      accessibility: 'audit-required'
    };
  });
  return result;
}"

# Take screenshot
playwright-cli screenshot --filename=.playwright-cli/login-lighthouse.png

# Close
playwright-cli close