\r\n\r\n# Cypress Lens\r\n\r\nBased on [Cypress Visual Regression](https://www.npmjs.com/package/cypress-visual-regression)\r\n\r\nModule for visual regression testing and reporting for [Cypress](https://www.cypress.io/).\r\n\r\n###### Visual Regression Demo\r\n\r\n\r\n\r\n###### Reporter Demo\r\n\r\n\r\n\r\n## Getting Started\r\n\r\nInstall:\r\n\r\n```sh\r\n$ npm install cypress-lens\r\n```\r\n\r\n# 1. Setup visual regression\r\n\r\nAdd the following config to your _cypress.config.js_ file:\r\n\r\n```js\r\nconst { defineConfig } = require(\"cypress\");\r\nconst getCompareSnapshotsPlugin = require(\"cypress-lens/dist/plugin\");\r\n\r\nmodule.exports = defineConfig({\r\n screenshotsFolder: \"./cypress/snapshots/actual\",\r\n trashAssetsBeforeRuns: true,\r\n video: false,\r\n e2e: {\r\n setupNodeEvents(on, config) {\r\n getCompareSnapshotsPlugin(on, config);\r\n },\r\n },\r\n});\r\n```\r\n\r\nAdd the command to _cypress/support/commands.js_:\r\n\r\n```js\r\nconst compareSnapshotCommand = require(\"cypress-lens/dist/command\");\r\n\r\ncompareSnapshotCommand();\r\n```\r\n\r\n> Make sure you import _commands.js_ in _cypress/support/e2e.js_:\r\n>\r\n> ```js\r\n> import \"./commands\";\r\n> ```\r\n\r\n### TypeScript\r\n\r\n_cypress/tsconfig.json_\r\n\r\n```json\r\n{\r\n \"compilerOptions\": {\r\n \"types\": [\"cypress\", \"cypress-lens\"]\r\n }\r\n}\r\n```\r\n\r\n# 1. Setup reporter\r\n\r\nInstall cypress-multi-reporters:\r\nThis plugin allows us to use more than one reporters since we want to keep the cypress default spec reports.\r\n\r\n```sh\r\n$ npm install cypress-multi-reporters\r\n```\r\n\r\nCreate reporter-config.json and place the following code\r\n\r\n```json\r\n{\r\n \"reporterEnabled\": \"spec, cypress-lens\"\r\n}\r\n```\r\n\r\nAdd the following config to your _cypress.config.js_ file:\r\n\r\n```js\r\nconst { defineConfig } = require(\"cypress\");\r\nconst getCompareSnapshotsPlugin = require(\"cypress-lens/dist/plugin\");\r\n\r\nmodule.exports = defineConfig({\r\n screenshotsFolder: \"./cypress/snapshots/actual\",\r\n trashAssetsBeforeRuns: true,\r\n video: false,\r\n e2e: {\r\n reporter: \"cypress-multi-reporters\",\r\n reporterOptions: {\r\n configFile: \"reporter-config.json\",\r\n },\r\n setupNodeEvents(on, config) {\r\n getCompareSnapshotsPlugin(on, config);\r\n },\r\n },\r\n});\r\n```\r\n\r\n# 3. How to use\r\n\r\n```js\r\nit(\"Should display the home page according to baseline snapshot\", () => {\r\n cy.visit(\"www.dreamshot.bg\");\r\n cy.compareSnapshot(\"home-page\");\r\n});\r\n```\r\n\r\n### Options\r\n\r\n`failSilently` is enabled by default. Add the following config to your cypress.config.js file to see the errors:\r\n\r\n```js\r\n{\r\n expose: {\r\n failSilently: false;\r\n }\r\n}\r\n```\r\n\r\n> **Note:** As of `cypress-lens` 2.0, configuration is read through Cypress'\r\n> `Cypress.expose()` API (introduced in Cypress 15.10.0) instead of the\r\n> deprecated `Cypress.env()`. Put cypress-lens settings such as `type`,\r\n> `SNAPSHOT_BASE_DIRECTORY`, `SNAPSHOT_DIFF_DIRECTORY`, `ALWAYS_GENERATE_DIFF`,\r\n> `ALLOW_VISUAL_REGRESSION_TO_FAIL` and `INTEGRATION_FOLDER` under the `expose`\r\n> config key (or pass them via the `--expose` CLI flag) rather than `env`.\r\n\r\nYou can also pass default arguments to `compareSnapshotCommand()`:\r\n\r\n```js\r\nconst compareSnapshotCommand = require(\"cypress-visual-regression/dist/command\");\r\n\r\ncompareSnapshotCommand({\r\n capture: \"fullPage\",\r\n});\r\n```\r\n\r\nThese will be used by default when no parameters are passed to the compareSnapshot command.\r\n\r\n### Take the base images:\r\n\r\n```sh\r\n$ ./node_modules/.bin/cypress run --expose type=base\r\n```\r\n\r\n### Find regressions:\r\n\r\n```sh\r\n$ ./node_modules/.bin/cypress run --expose type=actual\r\n```\r\n","readmeFilename":"README.md"}
![\"Logo\"](\"./assets/logo-light.png\"){kind=logo}
\r\n ![\"Cypress](\"./assets/dreamshot-logo.png\"){kind=logo}
\r\n \r\n![\"version\"/](\"https://img.shields.io/npm/v/cypress-lens\")
![\"license\"/](\"https://img.shields.io/badge/license-MIT-blue.svg\"){kind=icon}
\r\n \r\n \r\n ![\"semantic-version\"/](\"https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg\"){kind=icon}
\r\n \r\n \r\n ![\"conventional\"/](\"https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white\"){kind=icon}