# cypress-pixelmatch-regression

> This plugin was inspired by [cypress-visual-regression](https://github.com/cypress-visual-regression/cypress-visual-regression) and [cypress-visual-regression-resemble-js](https://github.com/Andremoniy/cypress-visual-regression-resemble-js) plugins.

Latest version **1.1.0** (published 2023-10-28) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install cypress-pixelmatch-regression
pnpm add cypress-pixelmatch-regression
yarn add cypress-pixelmatch-regression
bun add cypress-pixelmatch-regression
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2023-10-28 |
| First published | 2023-10-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 19.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | akondratsky |
| Keywords | visual regression, image diff, cypress |

## Links

- npm: https://www.npmjs.com/package/cypress-pixelmatch-regression
- Repository: https://github.com/akondratsky/cypress-pixelmatch-regression
- Issues: https://github.com/akondratsky/cypress-pixelmatch-regression/issues
- npm.io page: https://npm.io/package/cypress-pixelmatch-regression

## Dependencies (3)

- [pngjs](https://npm.io/package/pngjs.md) 6.0.0
- [mkdirp](https://npm.io/package/mkdirp.md) 3.0.1
- [pixelmatch](https://npm.io/package/pixelmatch.md) 5.3.0

## Alternatives

- [@snazzah/davey](https://npm.io/package/@snazzah/davey.md) — 1.5M weekly downloads
- [@vendure/testing](https://npm.io/package/@vendure/testing.md) — 8.3K weekly downloads
- [vue-simple-context-menu](https://npm.io/package/vue-simple-context-menu.md) — 6.6K weekly downloads
- [cypress-webpack-preprocessor-v5](https://npm.io/package/cypress-webpack-preprocessor-v5.md) — 2.1K weekly downloads
- [@backstage/plugin-catalog-backend-module-puppetdb](https://npm.io/package/@backstage/plugin-catalog-backend-module-puppetdb.md) — 1.3K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2023-10-28
- 1.0.1 — 2023-10-28
- 1.0.0 — 2023-10-28

## README

# cypress-pixelmatch-regression

This plugin was inspired by [cypress-visual-regression](https://github.com/cypress-visual-regression/cypress-visual-regression) and [cypress-visual-regression-resemble-js](https://github.com/Andremoniy/cypress-visual-regression-resemble-js) plugins.

The plugin uses [pixelmatch](https://github.com/mapbox/pixelmatch) to compare screenshots. Written in Typescript. Supports Typescript.

It was created to create the most precise visual regression test, to be run on the same environment and to track the minimal visual changes. If you want to run you visual regression on a different machines, consider using `pixelThreshold` option to avoid anti-aliasing problem (see ["Add Command"](#add-command) section)

## Getting Started

### Install

```shell
npm i cypress-pixelmatch-regression --save
```

### Cypress Configuration

```ts
import { defineConfig } from 'cypress';
import { addPixelmatchRegressionPlugin } from 'cypress-pixelmatch-regression/plugin';

export default defineConfig({
  screenshotsFolder: './cypress/snapshots/actual',
  video: false,
  trashAssetsBeforeRuns: true,

  env: {
    pixelmatchPlugin: {
      baseDir: './cypress/snapshots/base',
      diffDir: './cypress/snapshots/diff',
    },
  },

  e2e: {
    setupNodeEvents(on, config) {
      addPixelmatchRegressionPlugin(on, config);
    },
  },

  component: {
    setupNodeEvents(on, config) {
      addPixelmatchRegressionPlugin(on, config);
    },
  },
});
```

- `screenshotsFolder` is a directory where actual screenshots will be saved; `cypress-pixelmatch-regression` uses default `cy.screenshot()` command, and it saves them according to this parameter, it is required to run plugin
- `baseDir` is required, it is a directory where so-called baseline screenshots are kept
- `diffDir` is required, a directory with images containing rendered difference between actual and baseline screenshots
- `alwaysGenerateDiff` is optional, if true, difference files will be generated even if no difference found

### Add Command

You can add the command (under `cypress/support` folder):

```ts
import { addCompareSnapshotsCommand } from 'cypress-pixelmatch-regression/command';

addCompareSnapshotsCommand();
```

The `addCompareSnapshotsCommand()` method takes an object as a parameter. It consists of standard [cy.screenshot()](https://docs.cypress.io/api/commands/screenshot#Arguments) arguments and also contains two additional parameters:

- `errorThreshold` is a number from 0 to 1, which represents sensitivity to relative number of different pixels between actual and base image. By default equals 0 (minimal difference will cause failing the test);
- `pixelThreshold` is the `threshold` value from the pixelmatch. Ranges from 0 to 1. The smaller the value, the more sensitive pixel-by-pixel comparison; may be useful in solving problem with anti-aliasing.

**Pay your attention that sensitivity is maximal by default, you may need to configure it. The value for `pixelThreshold` 0.1 is used in the most libraries**


### Usage

```ts
// use predefined options:
cy.get('#your-component').compareSnapshots('screenshot-name');

// with options in command:
cy.get('#your-component').compareSnapshots('screenshot-name', {
  errorThreshold: 0.1,
  pixelThreshold: 0.2,
  // ...options for cy.screenshot()
});
```

---
_Source: https://npm.io/package/cypress-pixelmatch-regression · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._