Let's Test Our CSS!
summary
Shows how to test CSS and SCSS using concrete tools: unit-test a SASS function (choosing white or black text) with renderSync and assertions; run automated snapshot tests across SCSS components to detect cascade or variable regressions; use Playwright/Chromium headless to read getBoundingClientRect and getComputedStyle for layout and color checks, capture and diff image snapshots, and add a Node.js file-exists test for font files. All techniques are automated to catch real regressions before deployment.
AI-written summary · about
chapters (9)
- 0:00Testing CSS
- 3:11Why test CSS
- 7:13Testing SCSS
- 11:56Snapshot testing
- 14:15Automate snapshots
- 17:01Check visual rendering
- 20:17Screenshot test
- 24:37Font checks
- 28:26Q&A
related talks
04mCSS tests
42mAutomated CSS Testing
27mTest Your CSS with CSS
27mWriting Tests For CSS Is Possible! Don’t Believe The Rumors
51mModern CSS Development: Tooling & Workflows
40mModern CSS Development and Debugging
30mImplementing a Visual CSS Testing Framework
29mDon’t Believe the Rumors Writing Tests for CSS is Possible