Implementing a Visual CSS Testing Framework

on YouTube ↗18m

" summary

Implements an automated visual CSS regression pipeline that takes full‑page screenshots, diffs them with ImageMagick compare, and stores results on AWS S3; tests run under RSpec using Selenium via BrowserStack, use fixtures to avoid flaky data, and split visual specs off CI so main builds stay fast. Full‑page capture only reliably works in Firefox, diffs don’t currently fail the build (tests only fail on execution errors), and the dashboard shows per‑commit screenshots and diffs.

AI-written summary · about

" chapters (19)

1. 0:00Intro
2. 0:15using AUTOMATIC screenshot COMPARISON to catch style REGRESSIONS
3. 0:40IMPLEMENTING A VISUAL CSS TESTING FRAMEWORK
4. 2:34Huxley Phantom CSS Ghost Story Cactus Needle CSSCritic fighting-layout-bugs sikuli Mogo Quixote
5. 2:50WHAT DO I WANT?
6. 3:50PROCESS
7. 4:27UPLOAD
8. 5:36BUILDING our framework
9. 7:47SCREENSHOT with selenium
10. 9:54DYNAMIC DATA
11. 10:18DIFFING with imagemagick
12. 14:44amazon web services
13. 14:59lalalalal marketing/ index/ diff.png
14. 15:19VIEWING with the internet
15. 15:40THE FUTURE
16. 16:050% DIFFS
17. 16:41CURRENT commit on MASTER
18. 17:01DIFF BETWEEN PREVIOUS commit on MASTER
19. 17:15DIFF BETWEEN CURRENT commit on BRANCH

" related talks

• 30mImplementing a Visual CSS Testing FrameworkJessica Dillon · RailsConf 2015
• 32mContinuous Visual Integration for RailsMike Fotinakis · RailsConf 2016
• 21mVisual Regression Testing: From a Tool to a ProcessNikhil Verma · jsDay 2017
• 37mSpot the Difference; Automating Visual Regression TestingViv Richards · TestCon Vilnius 2018
• 29mDon’t Believe the Rumors Writing Tests for CSS is PossibleGil Tayar · You Gotta Love Frontend 2019
• 37mThe Colorful World of Visual Test AutomationOnur Baskirt · Selenium Camp 2017
• 27mWriting Tests For CSS Is Possible! Don’t Believe The RumorsGil Tayar · CSSConf EU 2019
• 39mSpot the difference: automating visual regression testingViv Richards · SeleniumConf Chicago 2018