Day 22: Visual Regression Tests

Overview

Added comprehensive visual regression testing suite to shikadigital.co.jp to detect unintended UI changes and maintain design consistency across browsers and viewports.

Implementation Details

Test Coverage: 15 Visual Tests

• Desktop (1280x720): Homepage, About, How We Work, Assessment, Case Studies
• Tablet (768x1024): Homepage, About, Assessment
• Mobile (375x667): Homepage, About, Assessment, Mobile Menu Open
• Components: Header Scrolled State, Footer, Assessment Form Q1

Key Features

• Screenshot Comparison: Full-page and component-level baseline snapshots
• Threshold: 1% max diff for anti-aliasing tolerance
• Content Reveal: Scroll-animated elements triggered before snapshots via IntersectionObserver
• Astro Toolbar Hidden: Dev UI excluded from screenshots
• Animation Handling: Waits for finite animations to complete (5s timeout safety)

NPM Scripts

• bun test:visual - Run visual regression tests
• bun test:visual:update - Update baseline screenshots after intentional changes

Helper Functions

• hideAstroToolbar(): Removes dev toolbar from DOM before capture
• revealAllContent(): Scrolls page to trigger animations, waits for completion

CI Configuration

Visual regression tests skipped in CI pipeline due to platform differences (Linux vs macOS rendering). Run locally on developer machines for comparison.