webjerk-snaps

website visual regression testing.

this package:

• takes user input for a snapjerk execution, and injects sensible defaults
• launches some-sort-browser adapter to capture screenshots
  • the only current supported adapter is webjerk-snaps-adapter-puppeteer.
  • the saucelabs adapter needs rework!
• creates a new reference image set or compares the captured images to a reference set
  • on comparison failure (optionally) generates a static website highlighting the failed comparisons. this is handy if you want your CI to deploy the site somewhere for public viewing.

this type of testing is somtimes also called CSS testing or screenshot testing.

don't like the way this package works? hack it! all things webjerk are small and modular. feel free to drop us an issue on GitHub with questions & comments too!

usage

API documentation lives here.

• to get image baselines, create a config and run. see the #example section
• run it!
  • all image basenames that are not present in the reference set become part of the reference set.
• subsequent runs compare against these images

example

// test.js
'use strict'
 
var wj = require('webjerk')
 
wj.run({
  plugins: [
    {
      name: 'webjerk-snaps',
      config: {
        desiredCapabilities: [ // see webdriverio or selenium docs!
          { browserName: 'chrome' },
          { browserName: 'firefox' }
        ],
        url: 'http://localhost:3333', // what page to extract snaps from
        testName: 'screenshot-all-divs',
        snapDefinitions: [{ selector: 'div', name: 'best div' }], // OR,
        snapDefinitionsFromWindow: function queryDivSnapDefinitions (divs, message) {
          // @NOTE this JS is run in the _browser_ context
          // webdriverio JS serialziation requires semis. :/
          var divs = document.getElementsByTagName('div');
          var map = [];
          var i = 0;
          var tDiv;
          while (divs[i]) {
            tDiv = divs[i];
            if (!tDiv.id) tDiv.id = '__dummy_div_' + i;
            map.push({ selector: '#' + tDiv.id, name: tDiv.id });
            ++i;
          }
          return map;
        }
      }
    }
  ]
})