Visual Validation
summary
Automated visual testing replaces brittle DOM checks with image comparisons powered by machine learning, catching misaligned labels, overlapping text, and layout regressions that DOM assertions miss; applied with Cypress/Selenium/WebDriverIO and the appletools service, it takes a baseline screenshot and flags meaningful changes (she points out 21 changes missed by humans). Integration uses a three‑call flow side.openEyes, checkWindow, closeEyes, runs across browsers/devices in parallel, and reports the exact CSS or DOM line that caused a failure.
AI-written summary · about
chapters (15)
- 0:00Introduction to visual testing
- 2:30Unintentional blindness in testing
- 3:54Limitations of DOM-based testing
- 4:56Real-world visual bug examples
- 10:57What is visual testing
- 13:25Modern visual testing with AI
- 14:29Demo of visual testing setup
- 17:36Adding visual assertions to tests
- 19:05Pros and cons of visual testing
- 28:53Scope and unintentional blindness
- 33:10Dynamic content matching levels
- 37:35Handling dynamic page loads
- 40:21Cross-browser and device testing
- 45:18Visual testing for web components
- 46:00Summary and Q&A
related talks
43mYour Tests Lack Vision: Adding Eyes to Your Automation Framework
56mYour Tests Lack Vision: Adding Eyes to Your Automation Framework
36mVisual Validation - The Missing Tip of the Automation Pyramid
21mYour Tests Lack Vision: Adding Eyes to Your Automation Framework
38mYour Tests Lack Vision: Adding Eyes to Your Automation Framework
27mVisual UI Testing – Testing the Last Mile
23mAdding a Second Pair of Eyes with Visual Testing
27mYour Tests Lack Vision: Adding Eyes to Your Automation Framework