top band

Saturday 3:15 p.m.–4 p.m.

Make web development awesome with visual diffing tools

Daniel Vanderkam

Audience level:


Visual diffs are a great way to check for regressions on web sites which may be missed by unit tests. In this talk you'll learn how to run end-to-end tests on your client and server web libraries using a tool called dpxdt. I'll also show how you can combine it with web-based diff tools like "git webdiff" to quickly and confidently iterate on web tools.


It's happened to everyone: you change a line of code or CSS, your tests pass and you do a release, only to discover that something has broken horribly. Perhaps you forgot to test mobile? Perhaps your layout shifted by a pixel and wrapped in ways you didn't want. Or perhaps you shipped some test markup you didn't mean to. Unit tests rarely catch these sorts of errors because they only test the things you can imagine going wrong. They're good for testing things with well-defined inputs and outputs, i.e. functions. Web pages are messier than this. Visual diffs complement unit tests by checking every pixel on the page. If anything changed from the last "golden image", the test fails. Visual diffs have become increasingly common for web apps, but they can also provide a layer of safety for client- and server-side modules, from Flask plugins to JavaScript libraries. The goal of this talk is to introduce visual diffs as a tool for testing libraries. I'll walk through the creation of a visual diff test and a set of golden images using [dpxdt][1], then show how they can be used to catch and debug problems. I'll also show how they can be included in version control to create a visual history of your code using image-aware diff tools like [git webdiff][2]. Finally, I'll discuss how `git webdiff` exemplifies the possibilities of replacing traditional GUI apps with Python-based web servers which run on the user's machine. [1]: [2]:
bottom band background