5 ms·

At my $OLDJOB, I used ImageMagick to compare snapshots during some automated front-end testing on our public Drupal site. It would compare the running test to

At my $OLDJOB, I used ImageMagick to compare snapshots during some automated front-end testing on our public Drupal site. It would compare the running test to previously accepted images, highlighting pixel diffs in red. It would also generate a 4 frame animated gif with of the original, highlit changes, the running test version, and back to the highlit changes (so it could loop for better comparison). Imagemagick saved enormous amounts of time for us as we made CSS and other module upgrades.

mch82 5y ago
Thanks for sharing this tip! Are there any guides you recommend? Edit: Here’s one guide for the legacy Imagemagick (may not work for the latest release), https://legacy.imagemagick.org/Usage/compare/ https://legacy.imagemagick.org/Usage/compare/ I’m trying to encourage my front end developers to use visual diffs to validate rendering rather than use Protractor to test HTML/CSS. I’ve known about BackstopJS, https://garris.github.io/BackstopJS/ https://garris.github.io/BackstopJS/ and am on the lookout for alternatives.
- majkinetor 5y ago
  Perceptual diff is another tool doing this: http://pdiff.sourceforge.net http://pdiff.sourceforge.net
- bkyan 5y ago
  I would recommend generating an animated .webp for the diff output, which ImageMagick supports. Animated GIFs have color resolution limits.
- bkyan 5y ago
  A note of caution if you're planning to use Puppeteer for screenshots -- One oddity I've experienced with Puppeteer, is that there are sometimes very small height differences between headless and non-headless modes when generating screenshots. I suspect the root cause is that they are rounding sub-pixels differently, in certain scenarios. So, I typically run Puppeteer locally with { headless: false } to try to get a pixel-perfect match to the regular desktop Chrome experience.
technobabbler 5y ago
For the lazy geeks out there, the service diffy does this easily and for cheap: https://diffy.website/ https://diffy.website/

mch82 5y ago

Thanks for sharing this tip! Are there any guides you recommend? Edit: Here’s one guide for the legacy Imagemagick (may not work for the latest release), https://legacy.imagemagick.org/Usage/compare/ https://legacy.imagemagick.org/Usage/compare/ I’m trying to encourage my front end developers to use visual diffs to validate rendering rather than use Protractor to test HTML/CSS. I’ve known about BackstopJS, https://garris.github.io/BackstopJS/ https://garris.github.io/BackstopJS/ and am on the lookout for alternatives.

majkinetor 5y ago
Perceptual diff is another tool doing this: http://pdiff.sourceforge.net http://pdiff.sourceforge.net
bkyan 5y ago
I would recommend generating an animated .webp for the diff output, which ImageMagick supports. Animated GIFs have color resolution limits.
bkyan 5y ago
A note of caution if you're planning to use Puppeteer for screenshots -- One oddity I've experienced with Puppeteer, is that there are sometimes very small height differences between headless and non-headless modes when generating screenshots. I suspect the root cause is that they are rounding sub-pixels differently, in certain scenarios. So, I typically run Puppeteer locally with { headless: false } to try to get a pixel-perfect match to the regular desktop Chrome experience.

technobabbler 5y ago

For the lazy geeks out there, the service diffy does this easily and for cheap: https://diffy.website/ https://diffy.website/