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