snapandcompare

Screenshot comparison tool used for CSS regression testing.

Usage no npm install needed!

<script type="module">
  import snapandcompare from 'https://cdn.skypack.dev/snapandcompare';
</script>

README

Snap And Compare

SnapAndCompare is an easy to use screenshot comparison tool used for CSS Visual Regression Testing built using NodeJS.

NO CODE...JUST CONFIGS.

It can compare against a single environment or dual and will produce visuals and equality stats on image comparisons.

Run in standalone mode or if you give a watchFile will run everytime that is updated/saved (useful for SASS development).

Examples:

Master image

Setup:

Download and install NodeJS

http://nodejs.org/download/

Download and install GraphicMagick (gm)

brew install graphicsmagick

Or if that doesn't work install from source (http://www.graphicsmagick.org/download.html).

./configure
make
sudo make install

Download app dependencies

npm install

Usage:

Update the config.js file to hold the masterUrl and diffUrl you need (they are often the same but not always) Run (first builds initial snapshot, second builds diff and compares):

node snapandcompare.js
node snapandcompare.js

How does the logic work:

Without a watchFile:

First run : For all Breakpoints will check if a master image exists, if not will create one.

Second run: For all Breakpoints will find the master image, create a new .diff image and run a comparison on the two producing a .fail image and flagging up if the images differ.

After that: For each Breakpoint it will either compare against the diff or download a new Master image (depending on what already exists in /screenshots).

With a watchFile:

It will continually run on save of the file. It will flag up the status of each Breakpoint as PASS or FAIL.

First run: On save of watchFile it will create the Master files after that will run the comparison evertime it detects a change.

Testing:

  • Swap the config files and run the program to test. ('./config') for ('./config.test').

Research: