devextreme-screenshot-comparer
TypeScript icon, indicating that this package has built-in type declarations

2.0.17 • Public • Published

TypeScript version Node.js version

Usage

Take a single screenshot and validate it:

import {​​​​​​​ createScreenshotsComparer, compareScreenshot }​​​​​​​ from 'devextreme-screenshot-comparer';
test('Full size pager', async (t) => {​​​​​​​​
    await t
        .expect(await compareScreenshot(t, 'pager-full-allpages.png'))
}​​

Take and validate several screenshots without failing a test:

// create comparer for collect results
const {​​​ takeScreenshot, compareResults }​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ = createScreenshotsComparer(t);
await t
    ... // perform test actions and take the first screenshot
    .expect(await takeScreenshot('pager-1.png', pagerElement))
    ...// perform other actions and take the second one
    .expect(await takeScreenshot('pager-2.png', pagerElement))
    // check the result and show errors
    .expect(compareResults.isValid())
    .ok(compareResults.errorMessages());

Files and folders structure

 .
 +- testing -- default root path
    +- tests
    |  +- etalons
    |  |  +- pager-screehshot1.png
    |  +- pager.ts -- testfile with takeScreenshot(t, 'screehshot1');
    +- screenshots
    |  +- pager-screehshot1.png
    |  +- pager-screehshot1.png
    |  +- pager-screehshot1_mask.png
    |  +- pager-screehshot1_text_mask.png
    +- artifacts
       +- compared-screenshots
       |  +- pager-screehshot1.png
       |  +- pager-screehshot1_etalon.png
       |  +- pager-screehshot1_mask.png
       +- pager-screehshot1 - generated only when `debug` mode enabled;
          +- ... -- step by step image transformations used for comparison;
          +- log.txt -- comparison logs 
         

Configuration

Default config:

const screenshotComparerDefault = {
  path: './testing',
  screenshotsRelativePath: '/screenshots', 
  destinationRelativePath: '/artifacts/compared-screenshots',
  generatePatch: false,
  highlightColor: { r: 0xff, g: 0, b: 0xff },
  maskRadius: 5,
  attempts: 2,
  attemptTimeout: 500,
  looksSameComparisonOptions: {
    strict: false,
    tolerance: 5,
    ignoreAntialiasing: true,
    antialiasingTolerance: 5,
    ignoreCaret: true,
  },
  textComparisonOptions: {
    strict: false,
    ignoreAntialiasing: true,
    ignoreCaret: true,
  },
  enableTextMask: true,
  textMaskRadius: 2,
  textDiffTreshold: 0.05,
};
  • Common options:
    • path - path to the screenshots root folder;
    • screenshotsRelativePath - a relative path for storing screenshots to compare (base part is the path property)
    • destinationRelativePath - a relative path for storing comparison results (base part is the path property)
    • generatePatch - save updated screenshots to the 'artifacts/screenshots' subfolder, keep etalon screenshots' tree hierarchy;
    • maskRadius - radius of ignored pixels when using a mask file;
    • attemps - count of attempts to get a valid screenshot;
    • attempTimeout - timeout between attemps;
    • ignoreSizeDifference - ignore the size difference between compared images
    • looksSameComparisonOptions - see look-same for more details;
  • Text comparison options:
    • enableTextMask - if enabled, comparer generates a mask over text glyphs. Comparison inside the mask area ignores subpixel diffs;
    • textMaskRadius - radius of the mask area around text glyph;
    • textDiffTreshold - a value between [0..1]. 0 means that no diff allowed betwen original and current text glyphes, 1 ignores differences within the mask area at all;
    • textComparisonOptions - see look-same for more details;

You can override the default configuration using .testcaferc.json. For example, override the path:

{
  "screenshots-comparer": {
    "path": "./testing/testcafe"
  }
}

or for any takeScreenshot call:

.expect(await takeScreenshot('', null, { looksSameComparisonOptions: { tolerance: 30 } }));

License

DevExtreme Screenshot Comparer is released as MIT-licensed

Readme

Keywords

none

Package Sidebar

Install

npm i devextreme-screenshot-comparer

Weekly Downloads

2,530

Version

2.0.17

License

MIT

Unpacked Size

104 kB

Total Files

35

Last publish

Collaborators

  • ilyakhd
  • timbset
  • alexslavr
  • amonulloev
  • andrey.lepikhov
  • devexpress-npm-publisher
  • yuliya.smirnova
  • night-skylark
  • vladislav.volkov
  • dx_services
  • devextreme--npm-admin
  • bingorus