{"id":20306366,"url":"https://github.com/trendyminds/visual-differ","last_synced_at":"2025-04-11T15:05:53.243Z","repository":{"id":53107628,"uuid":"299713275","full_name":"trendyminds/visual-differ","owner":"trendyminds","description":"A Node-based diffing tool to compare an array of URLs and flag differences between them","archived":false,"fork":false,"pushed_at":"2023-02-28T09:32:20.000Z","size":262,"stargazers_count":20,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T11:11:32.181Z","etag":null,"topics":["auditing","diff","nodejs","visual-diff"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"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/trendyminds.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-09-29T19:07:41.000Z","updated_at":"2024-12-17T22:14:52.000Z","dependencies_parsed_at":"2023-01-31T06:15:25.768Z","dependency_job_id":null,"html_url":"https://github.com/trendyminds/visual-differ","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendyminds%2Fvisual-differ","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendyminds%2Fvisual-differ/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendyminds%2Fvisual-differ/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendyminds%2Fvisual-differ/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trendyminds","download_url":"https://codeload.github.com/trendyminds/visual-differ/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248429073,"owners_count":21101780,"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":["auditing","diff","nodejs","visual-diff"],"created_at":"2024-11-14T17:13:04.870Z","updated_at":"2025-04-11T15:05:53.224Z","avatar_url":"https://github.com/trendyminds.png","language":"JavaScript","readme":"# 🎨 Visual Differ\nA Node-based auditing tool to visually diff pages\n\n\u003cimg src=\"example-cli.png\" alt=\"An example of the Visual Differ CLI\"\u003e\n\n## 🤔 What is it?\n\nHave you ever made a change that negatively impacted the front-end? Checking one page for a change might be easy. Checking hundreds is difficult and time-consuming.\n\n**Visual Differ** allows you to supply an array of URLs to audit and will create an `audit.csv` to show which comparisons passed and which ones had a non-trivial difference as defined in your config file.\n\nAdditionally, you can review the screenshots that were taken and see a \"heatmap\" of the visual differences thanks to [the pixelmatch library](https://github.com/mapbox/pixelmatch).\n\n\u003cimg src=\"example-diff.png\" alt=\"An example of the Visual Differ displaying the screenshots and diff\"\u003e\n\n## ✅ Usage\n1. Download the project\n2. Install dependencies `npm i`\n3. Copy `config.example.js` to `config.js`\n4. Modify your `config.js` values and supply your array of URLs to test\n5. Run `node index.js` to create screenshots, diffs and generate an `audit.csv` file\n\n## ⚙️ Configuring your Test\n\nYou can easily modify the parameters of your test in the `config.js` file (after copying `config.example.js` to `config.js`). Below are all of the options you can modify.\n\n```js\nmodule.exports = {\n  // The viewport to use when creating images from the URLs\n  viewport: {\n    width: 1280,\n    height: 800,\n  },\n\n  // Matching threshold, ranges from 0 to 1. Smaller values make the comparison more sensitive. 0.1 by default.\n  // See pixelmatch for more information: https://github.com/mapbox/pixelmatch#api\n  diffThreshold: 0.1,\n\n  // The number of pixels in the diff that, once reached, will be flagged in the audit during the testing\n  nonacceptableDiff: 10,\n\n  // The maximum amount of screenshot requests to run concurrently. Careful.\n  maxConcurrency: 2,\n\n  // The URLs to test for visual differences\n  urls: [\n    {\n      // The first URL to test\n      a: \"https://time.is/Los_Angeles\",\n\n      // The URL to compare the first test to\n      b: \"https://time.is/New_York\",\n\n      // Need to pass in some custom CSS to your test so you can hide or change elements?\n      // Provide as much CSS you need and it will be applied when navigating to the URLs\n      css: ``,\n    },\n  ],\n};\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendyminds%2Fvisual-differ","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrendyminds%2Fvisual-differ","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendyminds%2Fvisual-differ/lists"}