https://github.com/tiffafoo/cypress-screenshot-diff
📸Cypress screenshot diffing commands with multiple screenshot folders ability
https://github.com/tiffafoo/cypress-screenshot-diff
commands cypress diff plugin regression screenshot testing visual
Last synced: 8 months ago
JSON representation
📸Cypress screenshot diffing commands with multiple screenshot folders ability
- Host: GitHub
- URL: https://github.com/tiffafoo/cypress-screenshot-diff
- Owner: tiffafoo
- Created: 2020-03-23T18:08:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-13T05:09:43.000Z (over 4 years ago)
- Last Synced: 2025-06-17T10:55:45.322Z (about 1 year ago)
- Topics: commands, cypress, diff, plugin, regression, screenshot, testing, visual
- Language: JavaScript
- Homepage:
- Size: 158 KB
- Stars: 9
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
🚧This project is currently under development and may undergo changes 🚧
# cypress-screenshot-diff
📸Cypress screenshot diffing commands with multiple screenshot folders ability
## Installation
This module is distributed via npm which is bundled with node and should be installed as one of your project's `devDependencies`:
```bash
npm install --save-dev cypress-screenshot-diff
```
## Usage
cypress-screenshot-diff extends Cypress' cy command and adds `matchScreenshot()`.
1. Add this line to your project's `cypress/support/commands.js`:
```js
const { addCommands } = require("cypress-screenshot-diff");
addCommands();
```
2. Add/Update these tasks to your project's `cypress/plugins/index.js`
```js
const { addScreenshotDiffPlugin } = require("cypress-screenshot-diff");
module.exports = (on, config) => {
addScreenshotDiffPlugin(on,config);
};
```
## Configuration
To configure cypress-screenshot-diff, use the following custom command:
```js
cy.configureCypressScreenshotDiff(config)
```
### Example
```js
cy.matchScreenshot();
cy.get("h1").matchScreenshot();
```
## Why
In Cypress' infancy, before visual regression plugins, I made my own for personal use using jimp's diff utility and Cypress. However, as I started working with bigger monorepos, keeping the screenshots in a single folder, which is where Cypress takes screenshots, was getting pretty hefty for devs. Unfortunately, Cypress does not allow for dynamic screenshot folder roots either, and I didn't find any that did what I wanted structure wise. So I reworked my existing implementation to use pixelmatch and allow for different screenshot folders. If you come accross the same problem, hopefully this will help!
## Inspired By
- [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)
- [cypress-image-snapshot](https://github.com/palmerhq/cypress-image-snapshot)