Writing Tests For CSS Is Possible! Don’t Believe The Rumors
summary
Claim: CSS can be tested with visual regression testing that actually prevents fear of refactors. The demo uses Cypress + Applitools Eyes (and mentions Selenium / webdriverIO alternatives) to capture viewports, compare current screenshots to baselines, and let a dashboard accept or reject batches. Challenges are real — screenshots differ across GPUs and Chrome versions (one run shows subtle diffs one in ten times) — so tools use pixel-by-pixel vs AI comparison and cloud parallelization; the demo works and updates baselines when accepted.
AI-written summary · about
chapters (46)
- 0:00Introduction
- 0:38Responsiveness
- 1:07About Gil
- 1:39Backend Developers
- 2:04Frontend JavaScript
- 2:24Frontend CSS
- 3:23Why are developers writing tests
- 3:40Adding features to existing code
- 4:03Removing code
- 4:19Refactor
- 5:00Developer Testing
- 6:10Backend
- 6:24Frontend
- 7:17Functional Tests
- 8:09Functional Testing
- 8:31Visual Testing
- 8:46Writing Tests For CSS
- 9:04What Developers Think
- 9:54How Does It Work
- 10:52Visual Testing Magic
- 11:51Thank You
- 12:10Elephants
- 12:31Screenshots
- 13:28Screenshot Tests
- 14:10Comparison
- 14:47Why
- 15:22Chrome 67
- 15:32Pixels
- 15:50Pixel by Pixel
- 16:15Pixel Differences
- 16:32Do You Want It
- 17:12The Biggest Problem
- 17:51Advanced Comparison Algorithms
- 18:11Managing Comparisons
- 18:37Deltas
- 19:06Drag
- 19:26Other Tools
- 19:46Responsive
- 20:20Test Multiple Times
- 20:38paralyze
- 21:04cloud provider
- 21:25demo
- 21:38filter
- 21:49test
- 25:28summary
- 26:28I will test my CSS
related talks
29mDon’t Believe the Rumors Writing Tests for CSS is Possible
26mDon’t Believe the Rumors: Writing Tests for CSS is Possible
42mAutomated CSS Testing
30mLet's Test Our CSS!
37mThe Colorful World of Visual Test Automation
30mImplementing a Visual CSS Testing Framework
04mCSS tests
18mImplementing a Visual CSS Testing Framework