node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

webjerk-snaps

JavaScript Style Guide CircleCI

webjerk-snaps

website visual regression testing.

this package:

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;
        }
      }
    }
  ]
})