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

Authentication Flow (Multi-Step)

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

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

# Get snapshot to see form elements
playwright-cli snapshot --filename=.playwright-cli/login-form.yaml

# Fill form (use element refs from snapshot)
playwright-cli fill e1 "tys203831@gmail.com"
playwright-cli fill e2 "&Test1234"

# Capture before submit
playwright-cli screenshot --filename=.playwright-cli/form-filled.png

# Click submit button
playwright-cli click e3

# Wait for navigation
playwright-cli wait-for-load-state networkidle

# Capture authenticated page
playwright-cli screenshot --filename=.playwright-cli/authenticated-page.png

# Get snapshot of authenticated state
playwright-cli snapshot --filename=.playwright-cli/authenticated.yaml

# Close
playwright-cli close

Multi-Viewport Testing

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

# Desktop (1280x720)
playwright-cli open http://localhost:8787
playwright-cli resize 1280 720
playwright-cli screenshot --filename=.playwright-cli/desktop.png
playwright-cli close

# Tablet (768x1024)
playwright-cli open http://localhost:8787
playwright-cli resize 768 1024
playwright-cli screenshot --filename=.playwright-cli/tablet.png
playwright-cli close

# Mobile (375x667)
playwright-cli open http://localhost:8787
playwright-cli resize 375 667
playwright-cli screenshot --filename=.playwright-cli/mobile.png
playwright-cli close

Complete Accessibility Audit Flow

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

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

# Capture login page
playwright-cli screenshot --filename=.playwright-cli/1-login-page.png

# Run Lighthouse on login page
playwright-cli run-code "async page => {
  // Return page metrics for accessibility analysis
  return {
    url: page.url(),
    title: await page.title(),
    headingCount: await page.evaluate(() => document.querySelectorAll('h1,h2,h3,h4,h5,h6').length)
  };
}"

# Fill and submit login form
playwright-cli fill e1 "tys203831@gmail.com"
playwright-cli fill e2 "&Test1234"
playwright-cli click e3
playwright-cli wait-for-load-state networkidle

# Capture dashboard
playwright-cli screenshot --filename=.playwright-cli/2-dashboard.png

# Get snapshot for element inspection
playwright-cli snapshot --filename=.playwright-cli/dashboard-structure.yaml

# Navigate to other pages
playwright-cli goto http://localhost:8787/settings
playwright-cli screenshot --filename=.playwright-cli/3-settings.png
playwright-cli snapshot --filename=.playwright-cli/settings-structure.yaml

# Save browser state for later use
playwright-cli state-save .playwright-cli/auth-session.json

# Close
playwright-cli close

Viewport Presets

Common device sizes for testing:

Common Workflows

Workflow 1: Single Page Audit

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

# Capture and audit a single page
playwright-cli open http://localhost:8787
playwright-cli screenshot --filename=.playwright-cli/page.png
playwright-cli snapshot --filename=.playwright-cli/page-structure.yaml
playwright-cli close

# Then feed to accessibility audit
/design-eval:audit-accessibility --imageSource .playwright-cli/page.png --level AA

Workflow 2: Responsive Testing

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

# Test across all breakpoints
for size in "375x667" "768x1024" "1280x720" "1920x1080"; do
  IFS='x' read -r width height <<< "$size"
  playwright-cli open http://localhost:8787
  playwright-cli resize $width $height
  playwright-cli screenshot --filename=.playwright-cli/screenshot-${width}x${height}.png
  playwright-cli close
done

Workflow 3: Authentication + Multi-Page Audit

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

# Login and capture multiple pages
playwright-cli open http://localhost:8787/login

# Capture login page
playwright-cli screenshot --filename=.playwright-cli/1-login.png

# Fill and submit
playwright-cli fill e1 "tys203831@gmail.com"
playwright-cli fill e2 "&Test1234"
playwright-cli click e3
playwright-cli wait-for-load-state networkidle

# Capture dashboard
playwright-cli screenshot --filename=.playwright-cli/2-dashboard.png

# Navigate to other pages
playwright-cli goto http://localhost:8787/settings
playwright-cli screenshot --filename=.playwright-cli/3-settings.png

playwright-cli goto http://localhost:8787/profile
playwright-cli screenshot --filename=.playwright-cli/4-profile.png

# Save session for reuse
playwright-cli state-save .playwright-cli/auth-session.json

playwright-cli close

Workflow 4: Lighthouse + Accessibility Audit

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

# Capture and get page metrics
playwright-cli open http://localhost:8787

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

# Capture screenshot
playwright-cli screenshot --filename=.playwright-cli/page-for-audit.png

# Get page metrics for accessibility analysis
playwright-cli run-code "async page => {
  return {
    url: page.url(),
    title: await page.title(),
    headings: await page.evaluate(() => 
      document.querySelectorAll('h1,h2,h3,h4,h5,h6').length
    ),
    buttons: await page.evaluate(() => 
      document.querySelectorAll('button').length
    ),
    forms: await page.evaluate(() => 
      document.querySelectorAll('form').length
    ),
    images: await page.evaluate(() => 
      document.querySelectorAll('img').length
    )
  };
}"

playwright-cli close

# Feed screenshot to accessibility audit
/design-eval:audit-accessibility --imageSource .playwright-cli/page-for-audit.png --level AA

Element References

When you run playwright-cli snapshot, you get element references (e.g., e1, e2, e3). Use these in commands:

# Get snapshot to see available elements
playwright-cli snapshot

# Use element refs in commands
playwright-cli fill e1 "email@example.com"
playwright-cli fill e2 "password"
playwright-cli click e3  # submit button

Best Practices

1. Always Get Snapshot First

playwright-cli open http://localhost:8787
playwright-cli snapshot  # See available elements
# Now use element refs from snapshot

2. Wait for Navigation

# After form submission or navigation
playwright-cli click e3
playwright-cli wait-for-load-state networkidle
playwright-cli screenshot  # Capture after page loads

3. Use Consistent Filenames

# Group related screenshots with prefixes
playwright-cli screenshot --filename=1-login.png
playwright-cli screenshot --filename=2-dashboard.png
playwright-cli screenshot --filename=3-settings.png

4. Save Session State

# Save authenticated session
playwright-cli state-save auth-session.json

# Later, load it in a new session
playwright-cli open http://localhost:8787 --profile=/path/to/profile
playwright-cli state-load auth-session.json

5. Disable Animations for Consistent Captures

playwright-cli run-code "async page => {
  await page.addStyleTag({
    content: '* { animation: none !important; transition: none !important; }'
  });
}"
playwright-cli screenshot --filename=no-animations.png

Integration with Design Eval

Feed Screenshots to Accessibility Audit

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

# Capture screenshot
playwright-cli open http://localhost:8787
playwright-cli screenshot --filename=.playwright-cli/page.png
playwright-cli close

# Run accessibility audit
/design-eval:audit-accessibility --imageSource .playwright-cli/page.png --level AA --wcag-version 2.1

Feed Screenshots to Visual Consistency Check

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

# Capture at multiple viewports
playwright-cli open http://localhost:8787
playwright-cli resize 1280 720
playwright-cli screenshot --filename=.playwright-cli/desktop.png
playwright-cli close

# Check visual consistency
/design-eval:audit-visual-consistency --imageSource .playwright-cli/desktop.png

Troubleshooting

Element not found in snapshot

# Get fresh snapshot
playwright-cli snapshot

# Element refs change after navigation
# Get new snapshot after each navigation
playwright-cli goto http://localhost:8787/new-page
playwright-cli snapshot  # Get new element refs

Screenshot is blank

# Wait for content to load
playwright-cli wait-for-load-state networkidle
playwright-cli screenshot

Form submission not working

# Get snapshot to verify element refs
playwright-cli snapshot

# Check if button is clickable
playwright-cli run-code "async page => {
  return await page.isEnabled('button[type=\"submit\"]');
}"

Session state not persisting

# Save state explicitly
playwright-cli state-save my-session.json

# Verify state was saved
ls -la my-session.json

# Load in new session
playwright-cli open http://localhost:8787
playwright-cli state-load my-session.json

Reference Materials

• Playwright CLI Docs — Official documentation
• Snapshot Format — Understanding snapshot YAML
• Element References — How element refs work