Screenshot testing with ViteShot
summary
ViteShot claims to generate component screenshots in seconds by bundling with Vite/esbuild and driving browsers via Playwright/Chromium. Example runs show startup around 6 seconds and often under 1s per screenshot once chrome is up. It supports multiple frameworks, viewport variants, async beforeScreenshot hooks, CI-friendly runs with GitHub Actions or git-lfs and integrations for diffs and uploads, and it produces real image diffs from PNGs rather than HTML-only snapshots.
AI-written summary · about
chapters (15)
- 0:00Intro
- 2:01Screenshot generation
- 2:50Screenshots are complex
- 3:52What is Storybook
- 6:10Should you use Storybook
- 6:43ViteShot
- 8:21CSS
- 8:44Typescript
- 9:48Frameworks
- 10:06ViteShot setup
- 10:38Next steps
- 11:45GitHub diff
- 12:04Alternatives
- 13:06React Preview
- 14:25Questions
related talks
58mUnit Testing with Screenshots: Breaking the Sound Barrier
27mVitest Browser Mode
27mAnatomy of a Test Runner: What Vitest Keeps Getting Right
20mVite - The Next Generation Frontend Tooling
20mVitest: testing DX reimagined
35mBuilding a screenshot testing pipeline that scales
22mCypress Component Testing
13mUsing Headless Browsers to ship reliable and performant apps