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 inthen
. - Currently this is full tested, however only based on PhantomJS v2.1.1. With no guarantee it works in other engine like SlimerJS.
MIT.