Last night I went to the "GothamSASS" meetup group event at the ThoughtWorks NYC office (which is awesome by the way) which was about Visual Regression testing.
A very knowledgable developer, Ian Yamey, gave a talk about visual regression testing. I had never heard of such a thing before, but being such a TDD fan the thought is "testing your css" was intriguing to me. I mean, a slight mis-typing in your css file could cause a bug that's just as bad as problems with your JavaScript.
E2e Testing For CSS
At first I thought, "wow, that seems like a ton of code to be writing expect statements for all of your style rules!". Indeed, if you actually wrote "unit tests" for your css then that would take a lot of code. Instead, what Ian recommends is more of an e2e approach to testing your styles which is basically a program that compares visual snapshots of your site and spots the differences. Much like the old spot the differences cartoons in newspapers live the one below:
There are tools that can check your site in a similar fashion. This is a screenshot of Ian using Percy.io:
Ian also mentions PhantomCSS as another nice visual regression testing tool.
Final Thoughts
This talk was super interesting and really opened my mind to a concept that I had no idea existed. Percy calls itself a tool for, "Continuous visual integration for web apps" where it basically runs these visual tests on every git push. This seems a bit overkill for me right now, but I can definitely appreciate the power of this for ensuring a clean, correct interface across all devices, and like most automated testing, apps that have already gone live with large codebases and / or number of users hurt the most from visual software bugs, and Percy.io or PhantomCSS are tools that can drastically reduce this risk.
RSS Feed