Visually Testing Your Components
summary
A Storybook React app runs visual snapshots with Applitools Eyes via the simple CLI npx eyes storybook, which auto-discovers stories, establishes baselines, flags visual diffs for human review, and lets reviewers accept or reject changes; a 4-component library with 9 stories → 90 results in 37s demonstrates ultrafast cross‑browser baselining and regression detection, and the workflow integrates into GitHub Actions CI so tests run on pull requests without writing new test code.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 4:10Why components need visual testing
- 8:52Apple Eyes SDK setup
- 11:23First visual tests
- 13:34Intentional vs accidental changes
- 17:27Inspecting visual differences
- 21:23Cross-browser testing
- 24:36CI workflows
related talks
21mYour Tests Lack Vision: Adding Eyes to Your Automation Framework
42mHow Visual AI Makes Testing Easy
29mShifting-left and Right to Test a web app with CI
30mTesting presentation components visually
41mYour Tests Lack Vision: Adding Eyes to Your Automation Framework
27mComponent-Driven Development & Visual Test Coverage
24mCost-Effective Testing with Storybook and Playwright in Vue Applications
33mAdding a second pair of eyes with visual testing