Visual Testing with E2E Tests

"Visual validation catches bugs that functional tests miss. Write E2E tests with screenshot comparison and Vision MCP helpers."

When to Use This Skill

Use for every game feature validation to create E2E tests that:

• Compare screenshots against baseline images using Playwright API
• Detect game states (menu, playing, game over, win) using Vision MCP helpers
• Validate UI elements (HUD, health bars, buttons) programmatically
• Verify visual appearance matches design specifications (GDD) using Vision MCP helpers

MANDATORY: Port Detection Before Browser Testing

⚠️ CRITICAL: Vite dev server may run on different ports (3000, 3001, 5174, 8080, etc.)

Before ANY browser interaction, ALWAYS detect the correct port: