Keep Looking Good: An Introduction to Visual Regression Testing

Testing that a web application functions correctly is already commonplace, but how do you test that the app looks correct as well? Functional test tools can type into hidden fields, but your users cannot. The talk walks through getting started with visual regression tests using Codecept.js, an open source framework. At the end, you’ll be prepared to add visual regression tests to your own applications.

On a previous project, we frequently broke the style on our app in spite of having unit and end to end tests because of shared CSS or a new flag with an incorrect default on a shared component. As a result, I became passionate about visual regression tests to ensure that changes for a new page which looks good didn't break any of the old pages.

This is the lightning edition of the talk. I am working on a full length version which I will post later.

Watch on Vimeo

Code on Github