{"id":28358523,"url":"https://github.com/tiffafoo/cypress-screenshot-diff","last_synced_at":"2025-10-18T10:54:40.646Z","repository":{"id":43969847,"uuid":"249507658","full_name":"tiffafoo/cypress-screenshot-diff","owner":"tiffafoo","description":"📸Cypress screenshot diffing commands with multiple screenshot folders ability","archived":false,"fork":false,"pushed_at":"2022-02-13T05:09:43.000Z","size":162,"stargazers_count":9,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-17T10:55:45.322Z","etag":null,"topics":["commands","cypress","diff","plugin","regression","screenshot","testing","visual"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tiffafoo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-23T18:08:32.000Z","updated_at":"2021-02-21T11:12:00.000Z","dependencies_parsed_at":"2022-08-31T02:11:39.638Z","dependency_job_id":null,"html_url":"https://github.com/tiffafoo/cypress-screenshot-diff","commit_stats":null,"previous_names":["sirmerr/cypress-screenshot-diff"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tiffafoo/cypress-screenshot-diff","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiffafoo%2Fcypress-screenshot-diff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiffafoo%2Fcypress-screenshot-diff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiffafoo%2Fcypress-screenshot-diff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiffafoo%2Fcypress-screenshot-diff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tiffafoo","download_url":"https://codeload.github.com/tiffafoo/cypress-screenshot-diff/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tiffafoo%2Fcypress-screenshot-diff/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260346746,"owners_count":22995136,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["commands","cypress","diff","plugin","regression","screenshot","testing","visual"],"created_at":"2025-05-28T08:15:32.378Z","updated_at":"2025-10-18T10:54:40.640Z","avatar_url":"https://github.com/tiffafoo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"🚧This project is currently under development and may undergo changes 🚧\n\n# cypress-screenshot-diff\n\n📸Cypress screenshot diffing commands with multiple screenshot folders ability\n\n## Installation\n\nThis module is distributed via npm which is bundled with node and should be installed as one of your project's `devDependencies`:\n\n```bash\nnpm install --save-dev cypress-screenshot-diff\n```\n\n## Usage\n\ncypress-screenshot-diff extends Cypress' cy command and adds `matchScreenshot()`.\n\n1. Add this line to your project's `cypress/support/commands.js`:\n\n   ```js\n    const { addCommands } = require(\"cypress-screenshot-diff\");\n    \n    addCommands();\n   ```\n\n2. Add/Update these tasks to your project's `cypress/plugins/index.js`\n\n   ```js\n   const { addScreenshotDiffPlugin } = require(\"cypress-screenshot-diff\");\n\n   module.exports = (on, config) =\u003e {\n     addScreenshotDiffPlugin(on,config);\n   };\n   ```\n\n## Configuration\n\nTo configure cypress-screenshot-diff, use the following custom command:\n\n```js\ncy.configureCypressScreenshotDiff(config)\n```\n\n### Example\n\n```js\ncy.matchScreenshot();\ncy.get(\"h1\").matchScreenshot();\n```\n\n## Why\nIn 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!\n\n## Inspired By\n- [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot)\n- [cypress-image-snapshot](https://github.com/palmerhq/cypress-image-snapshot)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiffafoo%2Fcypress-screenshot-diff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftiffafoo%2Fcypress-screenshot-diff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftiffafoo%2Fcypress-screenshot-diff/lists"}