playwright-e2e

Visual regression testing captures screenshots of your UI before and after changes, comparing them to detect unintended layout shifts, styling issues, or rendering problems. This Skill uses Playwright to automate screenshot capture across desktop and mobile viewports, catching regressions that manual testing might miss.

Yes. This Skill validates rendering of Svelte components, CSS modifications, and layout structure changes by executing headless Playwright tests and comparing visual output. It enforces a production build step and captures screenshots to verify layout, theme, and responsiveness across devices.

Run tests using the integrated docker-compose setup: `docker compose run --rm playwright-test`. Tests execute headless, generate organized screenshots in frontend/test-results/screenshots/, and produce desktop and mobile views for verification—no additional configuration needed if your environment already uses docker-compose.

Screenshots are automatically captured to frontend/test-results/screenshots/ organized by viewport (desktop, mobile). You review the PNG outputs to confirm UI renders correctly; the Skill structures test locations and enforces organized output so regression detection is systematic rather than ad-hoc.

Visual E2E testing automates the verification step by capturing and comparing UI state across predefined scenarios and viewports. Instead of manually testing each layout variant, you run automated Playwright tests that detect layout shifts and styling regressions instantly, freeing QA to focus on edge cases and user workflows.