{"_id":"@elv1n/cypress-plugin-snapshots","_rev":"1-d6420f952106a647a6852a135680c570","name":"@elv1n/cypress-plugin-snapshots","dist-tags":{"latest":"1.4.4"},"versions":{"1.4.4":{"name":"@elv1n/cypress-plugin-snapshots","version":"1.4.4","description":"Cypress snapshot functionality for data","homepage":"https://github.com/elv1n/cypress-plugin-snapshots","repository":{"type":"git","url":"git+https://github.com/elv1n/cypress-plugin-snapshots.git"},"types":"types/index.d.ts","engines":{"node":">=8.2.1"},"bugs":{"url":"https://github.com/elv1n/cypress-plugin-snapshots/issues"},"keywords":["cypress","cypress-io","cypress-plugin"],"author":{"name":"Meinaart van Straalen"},"license":"MIT","scripts":{"ci:test":"jest & npm --prefix cypress run ci:test","cy:open":"npm --prefix cypress run cy:open","cy:run":"npm --prefix cypress run cy:run","cy:verify":"npm --prefix cypress run cy:verify","jest":"jest","lint":"eslint *.js","start":"node cypress/test-server/index.js","test":"jest & npm --prefix cypress run cy:run"},"dependencies":{"diff2html":"^2.7.0","fs-extra":"^7.0.1","image-size":"^0.7.2","jimp":"^0.10.3","js-base64":"^2.5.1","lodash":"^4.17.13","pixelmatch":"^4.0.2","pngjs":"^3.3.3","prettier":"^1.16.4","rimraf":"^2.6.3","sanitize-filename":"^1.6.1","socket.io":"^2.2.0","socket.io-client":"^2.2.0","source-map-support":"^0.5.10","unidiff":"1.0.2"},"peerDependencies":{"cypress":"^4.5.0"},"devDependencies":{"@types/pixelmatch":"^5.2.2","eslint":"^5.14.1","eslint-config-airbnb-base":"^13.1.0","eslint-config-prettier":"^4.0.0","eslint-plugin-cypress":"^2.2.1","eslint-plugin-import":"^2.16.0","eslint-plugin-jest":"^22.3.0","jest":"^24.1.0","rewire":"^4.0.1"},"prettier":{"printWidth":100,"semi":true,"singleQuote":true,"trailingComma":"es5"},"eslintConfig":{"extends":["airbnb-base","prettier"],"plugins":["cypress","jest"],"env":{"cypress/globals":true,"jest/globals":true},"rules":{"no-param-reassign":0,"no-use-before-define":0,"global-require":0,"no-underscore-dangle":0,"object-curly-newline":["error",{"ObjectExpression":{"consistent":true},"ObjectPattern":{"consistent":true},"ImportDeclaration":{"multiline":true,"minProperties":3},"ExportDeclaration":{"multiline":true,"minProperties":3}}]}},"eslintIgnore":["cypress/**/*"],"jest":{"testPathIgnorePatterns":["<rootDir>/examples/","<rootDir>/node_modules/","<rootDir>/cypress/"],"clearMocks":true,"testEnvironment":"node"},"gitHead":"01c08eb0e36b2b99fc8d4827985267f22072ebd3","_id":"@elv1n/cypress-plugin-snapshots@1.4.4","_nodeVersion":"12.18.3","_npmVersion":"6.14.6","dist":{"integrity":"sha512-RGSH3QTRn/f2OrPTsPV1tNbu4m+IE2wIv2LVb4CQFfsQYMeROIUTFZ+klkoPLaPp8zRTroSGcfwCk/8Sqy9Q1w==","shasum":"ec6a1caed95f7cee8d22382aee09c8c9e829579b","tarball":"https://registry.npmjs.org/@elv1n/cypress-plugin-snapshots/-/cypress-plugin-snapshots-1.4.4.tgz","fileCount":49,"unpackedSize":201391,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdaLKCRA9TVsSAnZWagAAXuMQAKN9GXeC3ZtQLYA+3yux\n1wZ5MqxB3yagtfLrAeL3GsQmIhEnen2AIriwUp6y9oP8E9jG0GB440tF+XOJ\nw0SNFaQW8ojRvGTBhw4lcj02xxqIoJguc0RmeCWgajSmwXIUehe2K3CLmUxg\nd7eSgOgldoIQyKXJA+j1SQuewHyvTAoTDGIY0DdDuI4rst2laD6LtZqOVnSY\nioXm99TTcUc1onphsTvNJHROFuUsLroj7KtrVL4tqTAN6q9wHlj/LJjYP5LR\nr6pF+9HJhO8nSSljYYfTPW2wCK/vlwWtEIpR/DFPdaTwQ2eShw90qgonsTUW\njwvjnmHkZee/aUtO4b30qM8+jjW8RbxKd6eoPb5DZ8XBfTOtaHyttX6Pbo0v\nuZ1ps/PDsuGGaeiRoaa+t47PdfywZdBgXs6dlRtbDbxCxWeki3GKzYJRpy5b\nQrESFxUJ2YxCDStexTbeSL85nyQZRT/ic8iOufS2aL9/1oQjiqjEL+yvYSiF\nafso0ZBE01HTmc8t+ESaAIqcfEGZffrm7vn7OpPs54sZ1NthfX7tn58CUtuk\nPyOT6dY7IlZVsRbMTiXMSLBctxItmEStJyWNb+w4YRPsX8lP5FZJayFIYtJr\n42KScjcCMsi0F51s4a/D3XOQzBRcISoVFwHeVy93tBduvv43mKVr2+Zf1I/J\np0Pn\r\n=oCnj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHszNIQCJ/mhpHj5omBFimO32/Tj+Mi6OcX1O8BU+TGqAiBFWgtCBhlmV2QKKwNVaENXROHEwOwOu6r0YaSpVpFIKg=="}]},"maintainers":[{"name":"elv1n","email":"elvin.d@outlook.com"}],"_npmUser":{"name":"elv1n","email":"elvin.d@outlook.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/cypress-plugin-snapshots_1.4.4_1601544905442_0.0390177983384381"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-01T09:35:05.407Z","1.4.4":"2020-10-01T09:35:05.631Z","modified":"2022-04-05T07:24:16.460Z"},"maintainers":[{"name":"elv1n","email":"elvin.d@outlook.com"}],"description":"Cypress snapshot functionality for data","homepage":"https://github.com/elv1n/cypress-plugin-snapshots","keywords":["cypress","cypress-io","cypress-plugin"],"repository":{"type":"git","url":"git+https://github.com/elv1n/cypress-plugin-snapshots.git"},"author":{"name":"Meinaart van Straalen"},"bugs":{"url":"https://github.com/elv1n/cypress-plugin-snapshots/issues"},"license":"MIT","readme":"# cypress-plugin-snapshots\n> Plugin for snapshot tests in [Cypress.io](https://www.cypress.io/).\n\n[![NPM][npm-icon]][npm-url]\n\n[![Build status][ci-image]][ci-url]\n\n![cypress-plugin-snapshots](docs/images/cypress-plugin-snapshots.png)\n\n## Installation\n`npm i cypress-plugin-snapshots -S`\n\n## Usage for text snapshots\n```javascript\ndescribe('data test', () => {\n  it('toMatchSnapshot - JSON', () => {\n    return cy.request('data.json')\n      .its('body')\n      .toMatchSnapshot();\n  });\n\n  it('toMatchSnapshot - JSON with options', () => {\n    return cy.request('data.json')\n      .its('body')\n      .toMatchSnapshot({\n        ignoreExtraFields: true,\n      });\n  });\n\n  it('toMatchSnapshot - HTML', () => {\n    cy.visit('page.html')\n      .then(() => {\n        cy.get('div').toMatchSnapshot();\n      });\n  });\n});\n```\n\nYou can pass the following options to `toMatchSnapshot` to override default behavior.\n```javascript\n{\n  \"ignoreExtraFields\": false,         // Ignore fields that are not in snapshot\n  \"ignoreExtraArrayItems\": false,     // Ignore if there are extra array items in result\n  \"normalizeJson\": true,              // Alphabetically sort keys in JSON\n  \"replace\": {                        // Replace `${key}` in snapshot with `value`.\n    \"key\": \"value\",\n  }\n}\n```\n\n**`replace`**\nUse `replace` with caution. Tests should be deterministic. It's often a better solution to influence your\ntest result instead of your snapshot (by mocking data for example).\n\n## Usage for image snapshots\n```javascript\nit('toMatchImageSnapshot - element', () => {\n  cy.visit('/static/stub.html')\n    .then(() => {\n      cy.get('[data-test=test]')\n        .toMatchImageSnapshot();\n    });\n});\n\nit('toMatchImageSnapshot - whole page', () => {\n  cy.visit('/static/stub.html')\n    .then(() => {\n      cy.document()\n        .toMatchImageSnapshot();\n    });\n});\n```\n\nYou can pass the following options to `toMatchImageSnapshot` to override default behavior.\n```javascript\n{\n  \"createDiffImage\": true,                // Should a \"diff image\" be created, can be disabled for performance\n  \"threshold\": 0.01,                      // Amount in pixels or percentage before snapshot image is invalid\n  \"thresholdType\": \"percent\",             // Can be either \"pixel\" or \"percent\"\n  \"name\": \"custom image name\",            // Naming resulting image file with a custom name rather than concatenating test titles\n  \"separator\": \"custom image separator\",  // Naming resulting image file with a custom separator rather than using the default ` #`\n  \"pixelMatch\": {}                        // See https://github.com/mapbox/pixelmatch#api\n}\n```\n\nYou can also use any option from the `cypress.screenshot` [arguments list](https://docs.cypress.io/api/commands/screenshot.html#Arguments).\n\nFor example:\n```javascript\ncy.get('.element')\n  .toMatchImageSnapshot({\n    clip: { x: 0, y: 0, width: 100, height: 100 },\n  });\n```\n\n## Configure Cypress.io\nAdd this to your `cypress.json` configuration file:\n```json\n\"ignoreTestFiles\": [\n  \"**/__snapshots__/*\",\n  \"**/__image_snapshots__/*\"\n]\n```\n\n### Plugin\nFind your `cypress/plugins/index.js` file and change it to look like this:\n\n```javascript\nconst { initPlugin } = require('cypress-plugin-snapshots/plugin');\n\nmodule.exports = (on, config) => {\n  initPlugin(on, config);\n  return config;\n};\n```\n\n### Command\nFind your `cypress/support/index.js` file and add the following line:\n\n```javascript\nimport 'cypress-plugin-snapshots/commands';\n```\n\n### Make changes to default configuration\nYou can customize the configuration in the `cypress.json` file in the root of your Cypress project.\n\nAdd the configuration below to your `cypress.json` file to make changes to the default values.\n\n```javascript\n\"env\": {\n  \"cypress-plugin-snapshots\": {\n    \"autoCleanUp\": false,            // Automatically remove snapshots that are not used by test\n    \"autopassNewSnapshots\": true,    // Automatically save & pass new/non-existing snapshots\n    \"diffLines\": 3,                  // How many lines to include in the diff modal\n    \"excludeFields\": [],             // Array of fieldnames that should be excluded from snapshot\n    \"ignoreExtraArrayItems\": false,  // Ignore if there are extra array items in result\n    \"ignoreExtraFields\": false,      // Ignore extra fields that are not in `snapshot`\n    \"normalizeJson\": true,           // Alphabetically sort keys in JSON\n    \"prettier\": true,                // Enable `prettier` for formatting HTML before comparison\n    \"imageConfig\": {\n      \"createDiffImage\": true,       // Should a \"diff image\" be created, can be disabled for performance\n      \"resizeDevicePixelRatio\": true,// Resize image to base resolution when Cypress is running on high DPI screen, `cypress run` always runs on base resolution\n      \"threshold\": 0.01,             // Amount in pixels or percentage before snapshot image is invalid\n      \"thresholdType\": \"percent\"     // Can be either \"pixels\" or \"percent\"\n    },\n    \"screenshotConfig\": {            // See https://docs.cypress.io/api/commands/screenshot.html#Arguments\n      \"blackout\": [],\n      \"capture\": \"fullPage\",\n      \"clip\": null,\n      \"disableTimersAndAnimations\": true,\n      \"log\": false,\n      \"scale\": false,\n      \"timeout\": 30000\n    },\n    \"pixelMatchConfig\": {            // See https://github.com/mapbox/pixelmatch#api\n      \"threshold\": 0.01,\n    },\n    \"serverEnabled\": true,           // Enable \"update snapshot\" server and button in diff modal\n    \"serverHost\": \"localhost\",       // Hostname for \"update snapshot server\"\n    \"serverPort\": 2121,              // Port number for  \"update snapshot server\"\n    \"updateSnapshots\": false,        // Automatically update snapshots, useful if you have lots of changes\n    \"backgroundBlend\": \"difference\"  // background-blend-mode for diff image, useful to switch to \"overlay\"\n  }\n}\n```\n\n## Caveats :warning:\nThere is currently an issue when running \"All Tests\" in Cypress with this plugin. You can follow the progress on the issue [here](https://github.com/meinaart/cypress-plugin-snapshots/issues/10) and [here](https://github.com/cypress-io/cypress/issues/3090). When running \"All Tests\" any tests that utilize `cypress-plugin-snapshots` will throw an error.\n\n## Roadmap\nBelow is a list of functionality that is under consideration for implementing in a next version.\n\n- Fix handling of \"update snapshot\" button that contains a replacable field\n- Disable \"update snapshots\" server in headless mode\n- Add more unit tests\n- Add [JSDoc](http://usejsdoc.org/) documentation\n- Improve TypeScript bindings\n\n## Contributing\nIn lieu of a formal styleguide, take care to maintain the existing coding style.\n\n## License\nThis plugin is released under the MIT license.\n\n[npm-icon]: https://nodei.co/npm/cypress-plugin-snapshots.svg?downloads=true\n[npm-url]: https://npmjs.org/package/cypress-plugin-snapshots\n[ci-image]: https://github.com/meinaart/cypress-plugin-snapshots/workflows/test/badge.svg?branch=master\n[ci-url]: https://github.com/meinaart/cypress-plugin-snapshots/actions\n","readmeFilename":"README.md"}