How to Compare Puppeteer Screenshots Using ImageMagick

Puppeteer is a great tool for automatically capturing website screenshots, but it lacks other image manipulation capabilities. In this tutorial, learn how to use ImageMagick's comparison feature to identify differences between Puppeteer screenshots.
by Josephine Loo ·

Contents

    Puppeteer is a powerful Node.js library for automating web browsers and performing tasks like doing automated tests, scraping data, and taking screenshots. However, one common challenge that users face when using Puppeteer to automate web browser tasks is to compare the screenshots of websites to ensure that they are identical or to identify differences between them.

    In this tutorial, we will explore how to use ImageMagick, a popular open-source image manipulation tool to compare Puppeteer screenshots and highlight any differences between them visually.

    If you haven’t tried taking a screenshot using Puppeteer, this tutorial will help you: How to Take Screenshots with Puppeteer. Otherwise, let’s get started!

    What is ImageMagick

    ImageMagick is a popular open-source software suite for displaying, converting, and editing raster and vector image files. It can be used as a standalone application, or as a library that can be integrated into other existing applications in various programming languages like C, C++, Python, PHP, Ruby, and more.

    With its rich collection of command-line tools, it is easy to perform a wide range of image manipulation operations, such as resizing, cropping, and color correction to modify and manipulate images programmatically. It can be used on various operating systems including Windows, macOS, and Ubuntu/Linux, and support over 200 different image file formats.

    ImageMagick has been available for free since the early 1990s. To date, it is still actively maintained and has over 130 contributors and 2000 discussion posts on GitHub, making it one of the best open-source image manipulation tools for developers.

    Why Compare Puppeteer Screenshots

    By using Puppeteer and ImageMagick, you can automate the process of capturing website screenshots and comparing them to identify changes. This can be used for various purposes, including:

    Testing and Debugging Web Applications

    Puppeteer is often used for doing automated tests for web applications. By taking screenshots during the tests and comparing them, you can quickly identify any issues or differences between expected and actual results.

    Quality Assurance

    Comparing website screenshots can help ensure that a website is functioning as intended and that there is no unexpected behavior. This can be especially useful when making updates or changes to a site, as it can help identify any issues that might have been overlooked.

    Competitive Analysis

    By periodically taking screenshots of a website and comparing them to previous screenshots, you can constantly monitor a website and get notified if there are any changes. This can help any business to stay up-to-date on its competitors' activities and react immediately to potential opportunities or threats.

    Comparing Screenshots with ImageMagick

    ImageMagick comes with a set of useful command-line tools that helps developers to manipulate images from the command line. One of them is the compare tool, which we will be using to compare Puppeteer screenshots in this tutorial.

    Save The Differences as a New Image

    The compare tool compares two images and generates a third image that highlights any differences between them visually. Here's an example that shows the basic usage of the compare tool to compare two images:

    magick compare screenshot-1.png screenshot-2.png difference.png
    

    screenshot-1.png

    a screenshot of Bannerbear Blog

    screenshot-2.png

    a screenshot of Bannerbear Blog with the logo and "Product" removed from the top navigation bar

    In the second screenshot, the logo and “Product” is missing from the top navigation bar. By running the command in the terminal, the output image difference.png will highlight the differences between the two images in red while other unchanged elements will be dimmed.

    difference.png

    the differences between two screenshots highlighted in red using ImageMagick

    The format of the comparison result is determined by the output filename's extension. Beside saving the result in image formats like PNG, JPEG, and TIFF, you can also name the output file using the .pdf extension to save the result as a PDF file.

    magick compare screenshot-1.png screenshot-2.png difference.pdf
    

    difference.pdf

    the differences between two screenshots highlighted in red using ImageMagick (PDF)

    🐻 Note: You can compare images of different formats (eg. PNG and JPEG). However, they must be of the same dimension.

    Use a Different Highlight Color

    Red is the default color used for highlighting the differences between images. However, the highlight color can be changed by adding the parameter -highlight-color followed by the specified color.

    magick compare screenshot-1.png screenshot-2.png -highlight-color blue compare-blue.png
    

    the differences between two screenshots highlighted in blue using ImageMagick

    Specifying a custom highlight color helps to emphasize the differences between two images when the same area of both images has different contents. For example, different from the previous example where the logo and the “Product” link are removed completely, in the screenshot below, the page title is changed from “Bannerbear Blog” to “Blog”.

    a screenshot of Bannerbear Blog with the page title changed from "Bannerbear Blog" to "Blog"

    When the compare command is executed, the differences will overlap and it becomes difficult to distinguish them as both contents are highlighted in the same color.

    the differences between two screenshots highlighted in red using ImageMagick (overlapped)

    In this case, we can use two different colors to highlight the differences to have a better comparison.

    Compare in Different Highlight Colors

    magick screenshot-1.png screenshot-3.png -write mpr:img +delete -fill white -colorize 80% \
    \( mpr:img -compose minus -composite -threshold 0 -background red -alpha shape \) \
    \( mpr:img +swap -compose minus -composite -threshold 0 -background blue -alpha shape \) \
    -background none -compose over -flatten compare-dual.png
    

    -write mpr:img writes the input images to a "Memory Program Register" (MPR) named "img" and holds the image data in memory, allowing subsequent operations to refer to the stored image data without having to read the input images from disk again.

    +delete deletes the last image in the current image sequence.

    -fill white -colorize 80% colorizes the image by 80% using white color.

    -compose minus -composite -threshold 0 -background red -alpha shape composes the images using the minus method, and fill the resulting alpha shape mask with red color. The same parameters are used for the other image using +swap, but with blue color.

    The last line of the command, -background none -compose over -flatten compare-dual.png composites the image over a white background and export it as compare-dual.png.

    the differences between two screenshots highlighted in red and blue using ImageMagick

    Comparing the two screenshots, the title has changed. Instead of highlighting the contents of both images using the same color, the original title in the first screenshot is highlighted in red while the new title in the second screenshot is highlighted in blue.

    View the Differences in a GIF

    Besides highlighting the differences between the two images in a static image, we can also present the differences in an animated GIF. As ImageMagick is a versatile tool that can export files in various formats as specified, we can generate a GIF from the two screenshots by naming the output as a .gif file.

    magick -delay 80 screenshot-1.png screenshot-3.png -loop 0 compare.gif
    

    -delay 80 displays the next image after pausing for 80 ticks. It controls the speed of the GIF.

    -loop 0 repeats the animation an infinite number of times.

    the differences between two screenshots presented in a GIF

    Although this method doesn't use ImageMagick to find the differences between both screenshots to do a real comparison, using an animated GIF can present the differences better visually if you need to present them in a slideshow or a video.

    Compare Website Screenshots Effectively

    Capturing website screenshots and comparing them seems like an easy task. However, it would be difficult to do so manually at a large scale. To effectively compare website screenshots at a large scale, tools like Puppeteer and ImageMagick that can automate the process can be really helpful.

    These tools not only save you time and effort, but they also provide reliable results. If you're interested in other ways to automate tasks, here are some articles that you can read:

    About the authorJosephine Loo
    Josephine is an automation enthusiast. She loves automating stuff and helping people to increase productivity with automation.

    Bannerbear Beginner Guide: How to Start Generating Images Dynamically in JavaScript with Bannerbear

    If you want to integrate dynamic image generation into your JavaScript project, this article is for you! Learn how to do it effortlessly with Bannerbear—we’ll walk you through the entire process, from setup and implementation to achieving the final result.

    How to Automatically Create Eye-Catching Images for Your App's Link Sharing Using Bannerbear (Node.js)

    Want to make your app’s link sharing stand out? Learn how to use Bannerbear to automatically create eye-catching images that boost click-through rates! This tutorial walks you through building a backend service with Node.js to automatically generate custom images based on dynamic data.

    How to Auto-Generate Social Media Posts For a Business Conference Using Bannerbear (Node.js): Part 2

    In Part 2 of our series on auto-generating social media posts for a business conference using Bannerbear, we'll be creating posts for panel sessions. The image for each post will feature key details like the session topic, moderator, and panelists.

    Automate & Scale
    Your Marketing

    Bannerbear helps you auto-generate social media visuals, banners and more with our API and nocode integrations

    How to Compare Puppeteer Screenshots Using ImageMagick
    How to Compare Puppeteer Screenshots Using ImageMagick