Extension to CasperJS tester, which is a fantastic utility for 'Navigation scripting & testing for PhantomJS and SlimerJS'. It indeed supplies APIs to capture snapshots based on those engines, such as capture, captureSelector and captureBase64 in the latest version v1.1.4 as of now. However none of those fit for the purpose of testing whether two snapshots match. Without this function we can not take its adantages into full speed especially in automating test. Wish this extension can fill the gap in a short term.

  npm i casperjs-assert-match-snapshot

In casper test suite:

  require('casperjs-assert-match-snapshot');


  casper.test.begin('Test case', function begin(test) {
    casper.start()
      .then(function () {
        test.assertMatchSnapshot('snapshot-file-name');
      })
      .then(function () {
        // other tests
      });
    casper.run(function () {
      test.done();
    });
  });

When run this first time, or when page is modified, to update snapshots, set this command option:

  casperjs test casper.suites.js --updateSnapshot"

There are several options to further define its behaviour. All of them have predefined values. You can change them of course

  var init = require('casperjs-assert-match-snapshot');
  init(options);

To apply specific options for a certain call, instead of the global settings:

  test.assertMatchSnapshot('snapshot-file-name', selector, options);

• folder: string, 'snapshots'

Directory where snapshots being placed, relative to current working directory.

• format: string, 'png' (allowed formats based on your engine.)

The snapshot file format

• keepTemp: boolean, false

Whether to leave temporary snapshot files which are tested against the original one in file system. Removed by default. These files have a prefix of temp_ in file name.

• maxDiff: number, 0 (0 - 100)

How much the maximum difference being be tolerant of is allowed. None by default, e.g. they should be totally identical.

• quality: number, 75 (0 - 100)

The quality of snapshot image for certain formats.

  casper.test.assertMatchSnapshot(filename: string, selector: string | Object, options: Object): casper

• filename: string, required

The filename of this snapshot file, excluding extension.

• selector: string or Object, optional

Specify the area of this snapshot. When undefined, implies the whole page. If string, it should a valid selector. Or a json object defining the bounds ({ left, top, width, height }). Refer to this doc.

• options: see above

casper

• It calls waitFor internally, so if the next steps depends on that test, please execute in then.
• Currently this is full tested, however only based on PhantomJS v2.1.1. With no guarantee it works in other engine like SlimerJS.

MIT.