Automated CSS Testing
summary
Argues that CSS is testable and offers concrete approaches: syntax checks and linting, pixel diffs with Huxley/PhantomCSS and DOM-style comparisons with Hardy, plus driving scenarios via Selenium/Cucumber/Capybara. Screenshots give exact output but break on content and tiny rendering differences; DOM sniffing compares applied styles and scales better. Proposes a design‑first workflow where a designer marks a known‑good state and automated cross‑browser checks catch unintended changes. A prototype exists but remains split across proprietary code and unfinished.
AI-written summary · about
chapters (11)
- 0:00Introduction and context
- 3:51The problem with CSS
- 7:17Identifying CSS anti-patterns
- 11:36The need for testing
- 14:00Static analysis tools
- 17:28Visual regression testing
- 20:24DOM-based CSS testing
- 23:58Acceptance testing approach
- 26:58Design-first testing workflow
- 29:24The proposed automated tool
- 38:27Q&A and concluding remarks
related talks
30mLet's Test Our CSS!
04mCSS tests
27mTest Your CSS with CSS
26mDon’t Believe the Rumors: Writing Tests for CSS is Possible
27mWriting Tests For CSS Is Possible! Don’t Believe The Rumors
51mModern CSS Development: Tooling & Workflows
30mImplementing a Visual CSS Testing Framework
29mDon’t Believe the Rumors Writing Tests for CSS is Possible