ssdiff

SSDiff

The open-source tool for pixel-perfect website migrations

Features

• Outputs a folder showing visual differences comparing images
• Out of the box feature to compare different sized screenshots by resizing them
• Debug logging and output logging can be enabled by config
• Configurable for multiple use cases
• Helps in determining the most different pathnames by providing a sorted result map as output

Use Cases:

• Compare screenshots to achieve a pixel-perfect match
• Ideal for website migrations to a new stack
• Spot differences in similar-looking web pages
• Open-source and customizable

Installation

npm install ssdiff

Config

    export interface SSDiffConfig {
      url1: string; // url of domain1
      url2: string; // url of domain2
      pathnames: string[]; // array of pathnames to be compared
      browserConfig?: BrowserConfig; // config passed to puppeteer.launch
      screenshotConfig?: ScreenshotConfig; // config passed to page.screenshot
      pageConfig?: PageConfig; // config passed to page.goto
      failInCaseOfDifferentSize?: boolean; // if true, the comparison will fail if the images are of different sizes
      debug?: boolean; // if true, debug logs will be printed
      outputFile?: boolean; // if true, output logs will be printed
    }

Dependencies

• The tool uses puppeteer to open browser in headless mode visit pages and take screenshots.
• It uses pixelmatch to compare the screenshots and return a result map.
• It uses sharp to resize the screenshots, in case they are of different sizes.

Local setup

• Clone the repo
• npm install
• npm run dev - to run ts scripts with runtime build using ts-node
• Modify and test example based on the changes made in src/ folder.

Contribution guide

• Create an issue or assign yourself an existing one
• Fork the repo
• git checkout -b branch_name
• Make the changes
• run linting and formatting scripts
• Make a PR and associate it with the issue

Example usage

An example can be found here

Example Flow

Basic architecture of the tool