karma-image-snapshot
v0.1.0
Published
Jasmine matcher for image comparisons based on jest-image-snapshot for visual regression testing
Downloads
170
Maintainers
Readme
karma-image-snapshot
Jasmine matcher that performs image comparisons based on jest-image-snapshot for visual regression testing
How to use
/** karma.config.js*/
module.exports = function(config) {
config.set({
frameworks: [/*✅*/'snapshot-jasmine', 'jasmine'],
/*...*/
snapshot: {
customSnapshotsDir: require('path').resolve(__dirname, '__image_snapshots__')
},
browsers: [/*✅*/'SnapshotLauncher' /* or SnapshotHeadlessLauncher*/]
});
};
If you want to automatically remove outdated snapshots you should add special reporter
/** karma.config.js*/
module.exports = function(config) {
config.set({
/*...*/
reporters: [/*...*/, /*✅*/'outdated-snapshot']
});
};
Now you can use window.screenshot
, window.setViewport
functions and asynchronous jasmine matcher toMatchImageSnapshot
in your tests
/** example.e2e.js*/
it('should compare image snapshots', async function() {
/*...*/
const image = await window.screenshot();
await expectAsync(image).toMatchImageSnapshot();
});
Working configuration and test example you can find in test
directory
API
Available properties for snapshot
and toMatchImageSnapshot
you can look here
Browser flags & options
You can tune browser settings through flags & options
/** karma.config.js*/
module.exports = function(config) {
config.set({
/*...*/
customLaunchers: {
Chrome: {
base: 'SnapshotLauncher',
options: /*✅*/{
devtools: true
},
flags: [/*✅*/'--font-render-hinting=none', '--no-sandbox']
}
}
});
};
Playwright
You can use playwright instead of puppeteer
/** karma.config.js*/
module.exports = function(config) {
config.set({
/*...*/
customLaunchers: {
Firefox: {
base: 'SnapshotLauncher',
browserType: require('playwright').firefox
}
}
});
};