karma-image-snapshot

Jasmine matcher that performs image comparisons based 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: ['SnapshotPuppeteer']
  });
};

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 in you can use window.screenshot function and asynchronous jasmine matcher toMatchImageSnapshot

  /** 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