Validation through Visual and Functional Harmony
Validation Simplified: Flake‑less Releases with Smart Visual Comparisons
Diego Molina, Selenium project lead and Sauce Labs senior field solutions engineer, explains how “validation simplified” combines functional automation with visual validation to deliver flake-less, intent-based confidence for releases.
Diego uses https://www.saucedemo.com/ as a running example to explore e-commerce checkout improvement. He demonstrates how overly detailed assertions can lead to brittle and flaky tests, while visual checks can reduce verbosity and ensure a consistent user experience across various browsers and mobile devices.
The webinar demos establish visual baselines in the Sauce Labs UI, extend coverage to real mobile devices, and shift validation earlier in the lifecycle by capturing and comparing designs in Figma using a Sauce Labs plugin and validating implemented components in Storybook.
He also demonstrates validating generated PDFs (order receipts) and concludes that functional testing, AI-authored tests, and visual validation complement each other to increase release confidence in a single Sauce Labs workflow.
00:00 Welcome and Agenda
01:17 Release Confidence Question
02:55 Why Visual Validation Matters
04:25 Checkout Example Setup
05:56 Reducing Flaky Assertions
08:12 Baselines in Sauce UI
09:51 Web to Mobile Validation
12:45 Validate Intent Not Details
14:59 Shift Left to Design
15:48 Figma Plugin Baselines
17:13 From Design to Development
20:50 Storybook Component Checks
23:43 End to End PDF Validation
25:50 AI Plus Visual Safety Net
27:25 Wrap Up and Takeaways
30:07 Thanks and Goodbye