visual-testing-loop

Visual Testing Loop

Overview

Automate the visual feedback loop for frontend development. No manual verification needed - Agent sees what users see and iterates autonomously.

Core principle: Generate → Serve → Screenshot → Analyze → Iterate (until satisfied)

When to Use

• Building new UI components or pages
• Iterating on visual design
• Verifying responsive layouts
• Testing dark/light themes
• Quality-checking before delivery

Prerequisites

Agent must have access to Playwright MCP tools:

• browser_navigate_playwright
• browser_take_screenshot_playwright
• browser_snapshot_playwright
• launch-process (for starting dev server)

The Loop

Phase 1: Generate

Create or modify the frontend code:

1. Apply frontend-design skill for aesthetic quality
2. Generate production-grade HTML/CSS/JS or React components
3. Ensure code is runnable locally

Phase 2: Serve

Start a local development server:

# For static HTML
npx serve -p 3000 ./dist

# For React/Vite
npm run dev

# For Next.js
npm run dev

Keep server running (use wait=false for background process)

Phase 3: Screenshot

Capture the rendered output:

1. Navigate to the page:

   browser_navigate_playwright → http://localhost:3000
   

2. Wait for page load:

   browser_wait_for_playwright → wait for key elements
   

3. Take screenshot:

   browser_take_screenshot_playwright → save to file
   

4. For full page:

   browser_take_screenshot_playwright → fullPage: true
   

Phase 4: Analyze

Evaluate the screenshot against quality criteria:

Visual Checklist:

• Typography is distinctive (not generic fonts)
• Color palette is cohesive and intentional
• Layout has visual hierarchy
• Spacing is consistent
• No visual glitches or overflow
• Responsive at current viewport
• Matches intended aesthetic direction

Technical Checklist:

• All elements render correctly
• Images/icons load properly
• No console errors (check browser_console_messages_playwright)
• Interactive states work (hover, click)