Let's get visual - Visual testing in your Vue application
summary
Claim: screenshot-based visual testing catches UI regressions that end-to-end tests miss. Implementation uses a self-hosted visual regression tracker (Docker) plus a Cypress plugin to take baselines, compare new screenshots and require human approval; first run fails until a baseline is accepted. Practical fixes shown: freeze time to avoid date churn, wait for rendering to avoid flaky snapshots, and ignore or stub dynamic images while documenting those exceptions. Results: catches layout/side-effect bugs and integrates into CI.
AI-written summary · about
chapters (6)
- 0:00Introduction and background
- 1:15The problem of UI errors
- 4:46Bridging gaps with automation
- 8:13Visual regression tools
- 13:09Pitfalls and best practices
- 19:10Conclusion and key takeaways
related talks
27mVisual UI Testing – Testing the Last Mile
38mYour Tests Lack Vision: Adding Eyes to Your Automation Framework
34mI See What is Going on: Visual Testing for Your Components
12mAutomation of GUI testing using visual regression testing
42mFunctional and Visual Testing for Web Applications
20mVisual testing with Visual Regression Tracker
54mVisual Validation
30mTesting presentation components visually