karma-image-snapshot
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/karma-image-snapshot package

    0.0.10 • Public • Published

    karma-image-snapshot Open in Gitpod

    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',
            driver: require('playwright').firefox
          }
        }
      });
    };

    Install

    npm i karma-image-snapshot

    DownloadsWeekly Downloads

    54

    Version

    0.0.10

    License

    Apache-2.0

    Unpacked Size

    41 kB

    Total Files

    25

    Last publish

    Collaborators

    • maksimr