https://github.com/trendyminds/visual-differ

A Node-based diffing tool to compare an array of URLs and flag differences between them
https://github.com/trendyminds/visual-differ

auditing diff nodejs visual-diff

Last synced: 6 months ago
JSON representation

A Node-based diffing tool to compare an array of URLs and flag differences between them

• Host: GitHub
• URL: https://github.com/trendyminds/visual-differ
• Owner: trendyminds
• Created: 2020-09-29T19:07:41.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-02-28T09:32:20.000Z (over 2 years ago)
• Last Synced: 2025-03-25T11:11:32.181Z (6 months ago)
• Topics: auditing, diff, nodejs, visual-diff
• Language: JavaScript
• Homepage:
• Size: 256 KB
• Stars: 20
• Watchers: 2
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🎨 Visual Differ

A Node-based auditing tool to visually diff pages



## 🤔 What is it?

Have you ever made a change that negatively impacted the front-end? Checking one page for a change might be easy. Checking hundreds is difficult and time-consuming.

**Visual Differ** allows you to supply an array of URLs to audit and will create an `audit.csv` to show which comparisons passed and which ones had a non-trivial difference as defined in your config file.

Additionally, you can review the screenshots that were taken and see a "heatmap" of the visual differences thanks to [the pixelmatch library](https://github.com/mapbox/pixelmatch).



## ✅ Usage

1. Download the project

2. Install dependencies `npm i`

3. Copy `config.example.js` to `config.js`

4. Modify your `config.js` values and supply your array of URLs to test

5. Run `node index.js` to create screenshots, diffs and generate an `audit.csv` file

## ⚙️ Configuring your Test

You can easily modify the parameters of your test in the `config.js` file (after copying `config.example.js` to `config.js`). Below are all of the options you can modify.

```js

module.exports = {

  // The viewport to use when creating images from the URLs

  viewport: {

    width: 1280,

    height: 800,

  },

  // Matching threshold, ranges from 0 to 1. Smaller values make the comparison more sensitive. 0.1 by default.

  // See pixelmatch for more information: https://github.com/mapbox/pixelmatch#api

  diffThreshold: 0.1,

  // The number of pixels in the diff that, once reached, will be flagged in the audit during the testing

  nonacceptableDiff: 10,

  // The maximum amount of screenshot requests to run concurrently. Careful.

  maxConcurrency: 2,

  // The URLs to test for visual differences

  urls: [

    {

      // The first URL to test

      a: "https://time.is/Los_Angeles",

      // The URL to compare the first test to

      b: "https://time.is/New_York",

      // Need to pass in some custom CSS to your test so you can hide or change elements?

      // Provide as much CSS you need and it will be applied when navigating to the URLs

      css: ``,

    },

  ],

};

```