{"id":20617943,"url":"https://github.com/applitools/netlify-plugin-visual-diff","last_synced_at":"2026-03-10T14:02:58.372Z","repository":{"id":37882007,"uuid":"260605454","full_name":"applitools/netlify-plugin-visual-diff","owner":"applitools","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-04T15:42:13.000Z","size":365,"stargazers_count":13,"open_issues_count":7,"forks_count":4,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-08T18:58:30.286Z","etag":null,"topics":[],"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/applitools.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-05-02T03:22:16.000Z","updated_at":"2024-12-25T22:10:48.000Z","dependencies_parsed_at":"2024-09-25T16:10:44.824Z","dependency_job_id":"a569fddc-db43-44d1-8bf4-2d9fe38f7faf","html_url":"https://github.com/applitools/netlify-plugin-visual-diff","commit_stats":{"total_commits":36,"total_committers":7,"mean_commits":5.142857142857143,"dds":0.5277777777777778,"last_synced_commit":"9d3ce258bc8184592932c03af9597e34fb6a6ac2"},"previous_names":["jlengstorf/netlify-plugin-visual-diff"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/applitools/netlify-plugin-visual-diff","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/applitools%2Fnetlify-plugin-visual-diff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/applitools%2Fnetlify-plugin-visual-diff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/applitools%2Fnetlify-plugin-visual-diff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/applitools%2Fnetlify-plugin-visual-diff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/applitools","download_url":"https://codeload.github.com/applitools/netlify-plugin-visual-diff/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/applitools%2Fnetlify-plugin-visual-diff/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269572072,"owners_count":24440285,"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","status":"online","status_checked_at":"2025-08-09T02:00:10.424Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-16T12:06:35.866Z","updated_at":"2026-03-10T14:02:53.303Z","avatar_url":"https://github.com/applitools.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Applitools Visual Diff Netlify Plugin\n\nCheck for visual diffs before deploying your site, in various browsers and responsive widths.\nEnsure that your CSS still works in all form factors and browsers before deployment, and record\na visual history of your site. And do this without writing a single line of code using this plugin.\n\nThis plugin runs the Applitools Eyes visual tests using Cypress and checks\nwhether the new build is visually different from the previous run.\n\nIf you decide that the visual tests should fail your site, then the visual changes\nwill need to be reviewed and approved in the Applitools Test Manager.\nOnce they’re approved, rebuilding the site will succeed without errors from this plugin.\n\n## Why\n\nCSS is hard. And so is building sites that work across all form factors. If you want to be sure\nthat your CSS and HTML changes are not breaking your site, you should check it for visual consistency\nby running a visual test.\n\nHas that change in your CSS broken any of the tens of pages in your site? Only a visual diff can make sure\nthat it hasn't, because going through all of them manually is certainly not an option. And if it was,\nyou probably would miss something anyway. Only a visual diff would ensure that\n\n## Setup\n\n1. If you're not already, register for Applitools Eyes at \u003chttps://applitools.com/register\u003e\n1. Login to the Eyes Test Manager at \u003chttps://eyes.applitools.com/\u003e\n1. Copy your Applitools API key from \u003chttps://eyes.applitools.com/\u003e:\n\n1. Create an environment variable in your Netlify site's settings called `APPLITOOLS_API_KEY`:\n   * Go to your site's page in Netlify\n   * Click on \"Site settings\"\n   * Expand \"Build and deploy\" in the nav bar on the right\n   * Click on \"Environment\" in the same nav bar, and click on \"Edit variables\"\n   * Add the `APPLITOOLS_API_KEY` variable along with the value you copied from Eyes.\n1. In your `netlify.toml`, add the plugin:\n\n   ```toml\n   [[plugins]]\n     package = \"netlify-plugin-visual-diff\"\n   ```\n\n1. If you need to configure the plugin (see [Configuration](#configuration) below),\n   for example, to ignore date-related elements that should\n   be ignored in the visual diff, use:\n\n   ```toml\n   [[plugins]]\n      package = \"netlify-plugin-visual-diff\"\n      [plugins.inputs]\n        ignoreSelector = \"#today,.copyright\"\n   ```\n\n1. Decide which browsers and form factors you want to check your site on\n   (by default, it will be tested on the latest Chrome, with a 1024x768 viewport), and\n   define them in the `netlify.toml`:\n\n   ```toml\n   [[plugins]]\n    package = \"netlify-plugin-visual-diff\"\n    [plugins.inputs]\n      ignoreSelector = \"#today,.copyright\"\n\n      [[plugins.inputs.browser]]\n        name = \"chrome\"\n        width = 1024\n        height = 768\n\n      [[plugins.inputs.browser]]\n        name = \"firefox\"\n        width = 1920\n        height = 1080\n\n      [[plugins.inputs.browser]]\n        deviceName = \"iPhone X\"\n   ```\n\n   For a full list of browsers and configurations,\n   see \u003chttps://www.npmjs.com/package/@applitools/eyes-cypress#configuring-the-browser\u003e\n\n1. That's it! Your next deploys will be visually checked on all the browsers and form factors you specified,\n   and if there is a diff, the build will\n   fail and a link to the Visual test will be added to the build so that you can verify that\n   there is a problem, or approve the changes so that your next build will succeed.\n\n\u003e Note: if you want the visual test not to fail the build but to just execute the visual test\n\u003e so that you can see the result in the Eyes Test Manager, add `failBuildOnDiff`\n\u003e to the configuration, thus:\n\u003e\n\u003e  ```toml\n\u003e  [[plugins]]\n\u003e    package = \"netlify-plugin-visual-diff\"\n\u003e    [plugins.inputs]\n\u003e      failBuildOnDiff = false\n\u003e  ```\n\n## Configuration\n\nThe Netlify Visual Diff plugin is a no-touch solution: you just add it to your `netlify.toml`,\nand you're good to go. But it _is_ configurable, using the following configurations:\n\n* `serverUrl`: if you're using the public Applitools server `eyesapi.applitools.com`, there is no\n  need to configure this, but if you're an Applitools enterprise user with a dedicated server,\n  put the server URL here, e.g. `https://acustomerapi.applitools.com`.\n  Default: `https://eyesapi.applitools.com`.\n* `ignoreSelector`: if you wish the diff to ignore certain regions when diffiing,\n  specify a selector that defines which elements to ignore\n  (remember you can have a selector with multiple elements using a `,`),\n  e.g. `ignoreSelector = \"#today,.copyright\"`. Default: none.\n* `failBuildOnDiff`: if you wish to only run the Visual test (to see the result in the Eyes\n  manager), without it failing the build, set this to `false`, e.g `failBuildOnDiff = false`.\n  Default: `true`.\n* `concurrency`: specify a higher level of concurrency to make the test faster.\n  For more information, see \u003chttps://www.npmjs.com/package/@applitools/eyes-cypress#concurrency\u003e.\n* `browser`: an array of browsers.\n  For more information, see \u003chttps://www.npmjs.com/package/@applitools/eyes-cypress#configuring-the-browser\u003e.\n\nThe default configuration, if none is specified, is:\n\n```toml\n[[plugins]]\n  package = \"netlify-plugin-visual-diff\"\n  [plugins.inputs]\n    serverUrl = \"https://eyesapi.applitools.com\" # The public Eyes server\n    ignoreSelector = \"\" # There is no null in TOML, but if there were, then it would be null\n    failBuildOnDiff = true\n    concurrency = 1\n    [[plugins.inputs.browser]]\n      name = \"chrome\"\n      width = 1024\n      height = 768\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapplitools%2Fnetlify-plugin-visual-diff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapplitools%2Fnetlify-plugin-visual-diff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapplitools%2Fnetlify-plugin-visual-diff/lists"}