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. 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.
0 Comments
Your comment will be posted after it is approved.
Leave a Reply. |
AuthorThe posts on this site are written and maintained by Jim Lynch. About Jim...
Categories
All
Archives
March 2023
|