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.
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.
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.
The posts on this site are written and maintained by Jim Lynch. About Jim...