Cost-Effective Testing with Storybook and Playwright in Vue Applications
summary
Claims that Storybook plus Playwright cuts testing cost by focusing on component-level automation: one-week setup yields ~20% quicker confidence, one month covers ~10 high‑priority components, three months covers most UI. Demonstrates a small rating component automated with interaction tests (clicking item four then five) and visual diffs via Chromatic, shows a homegrown "viewbook" replaced by Storybook, and recommends prioritizing complex modular components, composables, then utilities before pages.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 2:24Manual testing challenges
- 4:10From custom libs to Storybook
- 6:39Live coding rating component
- 9:55Playwright interaction tests
- 11:00Visual regression with Chromatic
- 12:27AutoDocs for documentation
- 13:13Maximizing Storybook value
- 16:25Efficient test strategies
- 17:07Testing composables
- 18:29Visual testing options
- 19:36Storybook setup costs
- 21:25Team integration benefits
- 23:36Key takeaways
- 24:18Q&A
related talks
24mStorybook Vitest
18mStorybook and Testing
27mComponent-Driven Development & Visual Test Coverage
26mWe May Not Need Component Testing
40mLove Story: Testing angular components with Storybook and Playwright
27mTesting design systems using storybook + Storybook 7.0 sneak peeks
41mWe may not need component (unit) testing
13mComponent Testing with Playwright for Vue