Painless visual testing

on YouTube ↗53m

" summary

Claim: visual regression testing becomes practical by turning wireframes into executable examples, taking screenshots, running automated image diffs, and routing only diffs to humans for approval. Uses approval testing, headless Chrome in AWS Lambda to run thousands of screenshots in parallel so feedback arrives in seconds, and stores expectations in versioned Markdown so markdown examples become executable specs. An open source prototype (appraise) shows the workflow, diffs, and human-approval loop working end to end.

AI-written summary · about

" chapters (6)

1. 0:00Start
2. 0:10Painless visual testing
3. 4:48Wireframes are examples
4. 10:24Why can't we do this for UI examples?
5. 11:39Rules of UI Testing 1. It's slow 2. It's brittle 3. Automation isn't too helpful
6. 16:31Euclidean axioms of UI Testing 1. It's slow 2. It's brittle 3. Automation isn't too helpful

" related talks

• 12mAutomation of GUI testing using visual regression testingAudun Wigum Arbo · NDC Oslo 2023
• 40mVisual regression testing: your strategy's blind spotThomas Boutin · AndroidMakers by droidcon 2026
• 27mVisual UI Testing – Testing the Last MileCraig Cavalier · React Boston 2019
• 18mImplementing a Visual CSS Testing FrameworkJessica Dillon · CSSConf Oakland 2014
• 21mVisual Regression Testing: From a Tool to a ProcessNikhil Verma · jsDay 2017
• 21mLet's get visual - Visual testing in your Vue applicationRamona Schwering · Vue.js Nation 2023
• 37mSpot the Difference; Automating Visual Regression TestingViv Richards · TestCon Vilnius 2018
• 27mWhat To Expect When You're Expecting: A guide to Regression TestingEmily Morehouse · DinosaurJS 2018