This summer’s “Ghost Busters” movie was about naughty ghosts getting busted, but we’re going to discuss some very friendly and helpful “ghosts” who do some busting of their own: they bust (or detect) visual regression bugs on your website.

A visual regression bug is a style defect that is unintentionally introduced to the site, usually when a well-meaning developer changes some other styles. Unless you test every page (and every resolution) of the site every time you make a style change, these regression bugs can go unnoticed and get deployed to your live website.

Conducting this much manual testing on regular basis would be quite costly. It would also not be very reliable because humans often overlook slight variations in typography and layout.

Fortunately, this is where our friendly “ghosts” come in. Casperjs, Phantomjs, Slimerjs and Wraith are automated testing utilities that allow us to quickly and reliably compare a live website with a development copy (or a historical baseline) of that site. These tools view the pages of your website at any number of specified widths (or “breakpoints”), taking screenshots of each. The screenshots are then compared (“diffed”) pixel-by-pixel and any differences are highlighted. Continue reading →