{"id":13711848,"url":"https://github.com/Visual-Regression-Tracker/agent-cypress","last_synced_at":"2025-05-06T21:32:20.007Z","repository":{"id":37962155,"uuid":"277063707","full_name":"Visual-Regression-Tracker/agent-cypress","owner":"Visual-Regression-Tracker","description":"Visual Regression Tracker integration plugin","archived":false,"fork":false,"pushed_at":"2023-10-31T14:39:02.000Z","size":1468,"stargazers_count":74,"open_issues_count":5,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-21T18:21:40.360Z","etag":null,"topics":["cypress","cypress-plugin","visual-testing"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Visual-Regression-Tracker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-07-04T07:43:43.000Z","updated_at":"2024-05-23T01:14:07.000Z","dependencies_parsed_at":"2023-12-26T06:33:14.938Z","dependency_job_id":"6cae6201-8020-412a-8dfb-2380b16bd747","html_url":"https://github.com/Visual-Regression-Tracker/agent-cypress","commit_stats":{"total_commits":84,"total_committers":9,"mean_commits":9.333333333333334,"dds":"0.33333333333333337","last_synced_commit":"7e7c89642ae846943fd5d83ab4528c2b2d9c3614"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visual-Regression-Tracker%2Fagent-cypress","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visual-Regression-Tracker%2Fagent-cypress/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visual-Regression-Tracker%2Fagent-cypress/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Visual-Regression-Tracker%2Fagent-cypress/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Visual-Regression-Tracker","download_url":"https://codeload.github.com/Visual-Regression-Tracker/agent-cypress/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250926212,"owners_count":21508916,"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":["cypress","cypress-plugin","visual-testing"],"created_at":"2024-08-02T23:01:12.278Z","updated_at":"2025-05-06T21:32:19.604Z","avatar_url":"https://github.com/Visual-Regression-Tracker.png","language":"TypeScript","readme":"# Native integration for [Cypress](https://www.cypress.io/) with [Visual Regression Tracker](https://github.com/Visual-Regression-Tracker/Visual-Regression-Tracker)\n\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/4ebb8d37b8f943548e992a7d063ac998)](https://www.codacy.com/gh/Visual-Regression-Tracker/agent-cypress?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=Visual-Regression-Tracker/agent-cypress\u0026utm_campaign=Badge_Grade)\n\nNpm: https://www.npmjs.com/package/@visual-regression-tracker/agent-cypress\n\n## Installation\n\nPlease note that the minimum supported Cypress version is [`12.17.1`, released in 10th July 2023](https://docs.cypress.io/guides/references/changelog#12-17-1).\n\n### Add package\n\n`npm install @visual-regression-tracker/agent-cypress`\n\n### Add commands\n\n`\u003crootDir\u003e/cypress/support/e2e.js` or `\u003crootDir\u003e/cypress/support/component.js`\n\nAll available commands:\n\n```js\nimport {\n  addVrtCommands,\n} from \"@visual-regression-tracker/agent-cypress\";\n\naddVrtCommands();\n```\n\nor one by one:\n\n```js\nimport {\n  addVrtTrackCommand,\n  addVrtStartCommand,\n  addVrtStopCommand,\n  addVrtTrackBufferCommand,\n  addVrtTrackBase64Command,\n} from \"@visual-regression-tracker/agent-cypress\";\n\naddVrtStartCommand();\naddVrtStopCommand();\naddVrtTrackCommand();\naddVrtTrackBufferCommand();\naddVrtTrackBase64Command();\n```\n\n### Add plugin\n\n`\u003crootDir\u003e/cypress.config.js`\n\n```js\nimport { defineConfig } from 'cypress';\nimport { addVisualRegressionTrackerPlugin } from \"@visual-regression-tracker/agent-cypress\";\n\nexport default defineConfig({\n  // e2e or component, depending of testing style\n  e2e: {\n    setupNodeEvents (on, config) =\u003e {\n      addVisualRegressionTrackerPlugin(on, config);\n    }\n  }\n});\n```\n\n### Configuration\n\n#### Update Cypress config\n\n`\u003crootDir\u003e/cypress.config.js`\n\n```js\nexport default defineConfig({\n\n  env: {\n    \"visualRegressionTracker\": {\n      // URL where backend is running\n      // Required\n      \"apiUrl\": \"http://localhost:4200\",\n\n      // Project name or ID\n      // Required\n      \"project\": \"Default project\",\n\n      // User apiKey\n      // Required\n      \"apiKey\": \"tXZVHX0EA4YQM1MGDD\",\n\n      // Current git branch\n      // Required\n      \"branchName\": \"develop\",\n\n      // Branch with baseline\n      // Optional - when not set, main branch from project settings is used\n      \"baselineBranchName\": \"release\",\n\n      // Log errors instead of throwing exceptions\n      // Optional - default false\n      \"enableSoftAssert\": true,\n\n      // Unique ID related to one CI build\n      // Optional - default null\n      \"ciBuildId\": \"SOME_UNIQUE_ID\",\n    }\n  }\n});\n```\n\n#### Or, as JSON config file `vrt.json`\n\n_Used only if not explicit config provided_\n_Is overriden if ENV variables are present_\n\n```json\n{\n  \"apiUrl\": \"http://localhost:4200\",\n  \"project\": \"Default project\",\n  \"apiKey\": \"tXZVHX0EA4YQM1MGDD\",\n  \"ciBuildId\": \"commit_sha\",\n  \"branchName\": \"develop\",\n  \"enableSoftAssert\": false\n}\n```\n\n#### Or, as environment variables\n\n_Used only if not explicit config provided_\n\n```\nVRT_APIURL=\"http://localhost:4200\"\nVRT_PROJECT=\"Default project\"\nVRT_APIKEY=\"tXZVHX0EA4YQM1MGDD\"\nVRT_CIBUILDID=\"commit_sha\"\nVRT_BRANCHNAME=\"develop\"\nVRT_BASELINEBRANCHNAME=\"release\"\nVRT_ENABLESOFTASSERT=true\n```\n\n## Usage\n\n### Setup\n\n```js\ncy.vrtStart();\n```\n\n### Assert\n\n```js\ncy.vrtTrack(\"Whole page with default params\");\n\ncy.get(\"#navbar\").vrtTrack(\"Separate element with default params\");\n\ncy.vrtTrack(\n  \"Whole page with additional options\",\n  {\n    viewport: \"1920x1080\",\n    os: \"MacOS\",\n    device: \"Cloud agent\",\n    customTags: \"Cloud, DarkTheme, Auth\",\n    diffTollerancePercent: 1,\n    ignoreAreas: [{ x: 1, y: 2, width: 100, height: 200 }],\n    retryLimit: 2,\n    keepScreenshot: false, // Keep screenshot local copy, false by default\n  },\n  (err) =\u003e {\n    console.log(\"Screenshot has diff with baseline\", err);\n    return true; // Skip failing test\n  }\n);\n```\n\n##### options (optional)\n\nAllows to set options for taking screenshot. All `options` from `screenshot` command are also supported [more details](https://docs.cypress.io/api/commands/screenshot.html#Arguments)\n\nViewport is taken from `Cypress.config()`, if option is not set\n\nBrowser is taken from `Cypress.browser.name`\n\n##### errorCallbak (optional)\n\nAllows you to define a callback that receives the error for custom side-effects.\n\nAlso allows to override assertion policy. When callback returns `true` this acts similar to `enableSoftAssertions` option in config, but allows to enable soft assertion only for one specific screenshot.\n\n### Teadown\n\n```js\ncy.vrtStop();\n```\n\n## Examples\n\nhttps://github.com/Visual-Regression-Tracker/examples-js\n","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVisual-Regression-Tracker%2Fagent-cypress","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FVisual-Regression-Tracker%2Fagent-cypress","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVisual-Regression-Tracker%2Fagent-cypress/lists"}