Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maksimr/karma-image-snapshot
Karma jasmine matcher that performs image comparisons based on jest-image-snapshot for visual regression testing
https://github.com/maksimr/karma-image-snapshot
image-comparison jasmine karma snapshot-testing visual-regression-testing
Last synced: about 1 month ago
JSON representation
Karma jasmine matcher that performs image comparisons based on jest-image-snapshot for visual regression testing
- Host: GitHub
- URL: https://github.com/maksimr/karma-image-snapshot
- Owner: maksimr
- License: apache-2.0
- Created: 2021-09-05T18:34:33.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-13T01:48:17.000Z (8 months ago)
- Last Synced: 2024-04-14T10:00:54.503Z (8 months ago)
- Topics: image-comparison, jasmine, karma, snapshot-testing, visual-regression-testing
- Language: JavaScript
- Homepage:
- Size: 854 KB
- Stars: 4
- Watchers: 4
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - karma-image-snapshot - Karma jasmine matcher that performs image comparisons based on [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot) for visual regression testing. (Table of contents / Angular)
- fucking-awesome-angular - karma-image-snapshot - Karma jasmine matcher that performs image comparisons based on <b><code> 3848⭐</code></b> <b><code> 200🍴</code></b> [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)) for visual regression testing. (Table of contents / Angular)
- fucking-awesome-angular - karma-image-snapshot - Karma jasmine matcher that performs image comparisons based on <b><code> 3829⭐</code></b> <b><code> 198🍴</code></b> [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)) for visual regression testing. (Table of contents / Angular)
README
# karma-image-snapshot
[](https://gitpod.io/#https://github.com/maksimr/karma-image-snapshot)
[](https://www.npmjs.com/package/karma-image-snapshot)
Jasmine matcher that performs image comparisons based
on [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot) for visual regression testing
## How to use
```js
/** 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
```js
/** 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
```js
/** 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](https://github.com/americanexpress/jest-image-snapshot#%EF%B8%8F-api)
## Browser flags & options
You can tune browser settings through flags & options
```js
/** 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
```js
/** karma.config.js*/
module.exports = function(config) {
config.set({
/*...*/
customLaunchers: {
Firefox: {
base: 'SnapshotLauncher',
browserType: require('playwright').firefox
}
}
});
};
```