Automating visual testing with Percy
summary
Automates visual regression checks by sending DOM snapshots (not heavy images) to a rendering farm that parallelizes rendering (hundreds/100 at a time), freezes animations, and normalizes fonts to avoid false positives. Integrates with CI and test suites (Cypress, Selenium, Puppeteer, WebdriverIO, Storybook) via a single Percy snapshot call and shows visual diffs in PRs; teams report changing CSS frameworks twice with almost no regressions, so it scales to thousands of pages.
AI-written summary · about
chapters (16)
- 0:00Intro
- 0:55What is visual testing
- 2:19What is visual testing about
- 3:20Visual testing vs functional testing
- 8:50Benefits of visual testing
- 10:26What Percy does
- 12:38Percy demo
- 20:12How Percy works
- 23:24Visual rendering infrastructure
- 25:09Wrapup
- 25:52Use Cases
- 31:34Conclusion
- 31:49Questions
- 35:04Percy vs Snapshots
- 40:59Data and Time
- 44:44Fonts
related talks
27mPixel by Pixel: Visual Regression Testing in Ember
12mAutomation of GUI testing using visual regression testing
42mFunctional and Visual Testing for Web Applications
26mAutomated Visual Testing in Ember
28mDemystifying Visual Testing with WebDriverIO
32mContinuous Visual Integration for Rails
30mTesting Tools and Their Friends
21mVisual Regression Testing: From a Tool to a Process