j/snapshot
1
0
Fork 0
mirror of https://github.com/datashard/snapshot.git synced 2024-11-24 14:52:28 +00:00
Code Issues Projects Releases Packages Wiki Activity

updated readme

Browse source
This commit is contained in:
Joshua 2022-09-13 16:02:24 +02:00
parent c9be09dc48
commit fc42087ced
2 changed files with 76 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.github/assets/updated-mismatch.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 41 KiB

154
README.md
View file

@ -8,90 +8,70 @@
[![semantic-release][semantic-image] ][semantic-url] [![semantic-release][semantic-image] ][semantic-url]
[![renovate-app badge][renovate-badge]][renovate-app] [![renovate-app badge][renovate-badge]][renovate-app]
## Note > **Note** \
> \
Please take a look at a few other Cypress snapshot plugins: [cypress-plugin-snapshots](https://github.com/meinaart/cypress-plugin-snapshots), [cypress-image-snapshot](https://github.com/palmerhq/cypress-image-snapshot). > Please take a look at a few other Cypress snapshot plugins:
>
> - [cypress-plugin-snapshots](https://github.com/meinaart/cypress-plugin-snapshots)
> - [cypress-image-snapshot](https://github.com/palmerhq/cypress-image-snapshot).
## Install ## Install
Requires [Node](https://nodejs.org/en/) version 6 or above. Requires [Node](https://nodejs.org/en/) version 10 or above.
```sh ```sh
npm install --save-dev @cypress/snapshot npm install --save-dev @cypress/snapshot
``` ```
## Use ## Import
After installing, add the following to your `cypress/support/commands.js` file After installing, add the following to your `cypress/support/commands.js` file
```js ```js
require('@cypress/snapshot').register() require("@cypress/snapshot").register();
``` ```
This registers a new command to create new snapshot or compare value to old snapshot This registers a new command to create new snapshot or compare value to old snapshot
```js and add the following to your `cypress.config.js`
describe('my tests', () => {
it('works', () => {
cy.log('first snapshot')
cy.wrap({ foo: 42 }).snapshot()
cy.log('second snapshot')
cy.wrap({ bar: 101 }).snapshot()
})
})
describe('focused input field', () => { ```js
it('is empty and then typed into', () => { e2e: {
cy.visit('http://todomvc.com/examples/react/') setupNodeEvents(on, config) {
cy require("@cypress/snapshot").tasks(on, config)
.focused() },
.snapshot('initial')
.type('eat healthy breakfast')
.snapshot('after typing')
})
})
``` ```
By default, the snapshot object can be found in file `snapshots.js`. In the above case it would look something like this **Note:** `@cypress/snapshot` **requires** the `readFileMaybe` plugin to be included, which can be easily done using the code above
# Usage
Currently, if you want to take more than one snapshot, you need to pass a Step Name to prevent overwrites / test failures
```js ```js
module.exports = { describe("my tests", () => {
"focused input field": { it("works", () => {
"is empty and then typed into": { cy.log("first snapshot");
"initial": { cy.wrap({ foo: 42 }).snapshot("foo");
"tagName": "input", cy.log("second snapshot");
"attributes": { cy.wrap({ bar: 101 }).snapshot("bar");
"class": "new-todo", });
"placeholder": "What needs to be done?", });
"value": "" ```
}
}, In the above case, you can find the stored snapshot in their own files, mentioned above them
"after typing": {
"tagName": "input", ```json
"attributes": { // cypress/snapshots/my-tests-works-foo.json
"class": "new-todo", {"foo": 42}
"placeholder": "What needs to be done?", // cypress/snapshots/my-tests-works-bar.json
"value": "eat healthy breakfast" {"bar": 101}
}
}
}
},
"my tests": {
"works": {
"1": {
"foo": 42
},
"2": {
"bar": 101
}
}
}
}
``` ```
If you change the site values, the saved snapshot will no longer match, throwing an error If you change the site values, the saved snapshot will no longer match, throwing an error
![Snapshot mismatch](.github/assets/snapshot-mismatch.png) ( picture taken from `cypress/snapshots/Arrays.json`)
![Snapshot mismatch](.github/assets/updated-mismatch.png)
Click on the `SNAPSHOT` step in the Command Log to see expected and current value printed in the DevTools. Click on the `SNAPSHOT` step in the Command Log to see expected and current value printed in the DevTools.
@ -101,45 +81,61 @@ You can control snapshot comparison and behavior through a few options.
```js ```js
cy.get(...).snapshot({ cy.get(...).snapshot({
name: 'human snapshot name', // to use in the snapshot file snapshotName: 'Snapshot Name', // to use as a File Name
snapshotPath: 'cypress/not_snapshots', // where to save the Snapshot
json: false // convert DOM elements into JSON json: false // convert DOM elements into JSON
// when storing in the snapshot file }) // when storing in the snapshot file
// will save as
// cypress/not_snapshots/Snapshot-Name.json
```
You can also pass a "Step Name" to the Function
```js
cy.get(...).snapshot("Intercepted API Request")
// will save as
// cypress/snapshots/<context>-<describe>-<it>-Intercepted-API-Request.json
// to prevent duplications
```
or both
```js
cy.get(...).snapshot("Intercepted API Request", {
snapshotPath: "cypress/snapshots/api",
snapshotName: "first_intercept"
}) })
// will save as
// cypress/snapshots/api/first_intercept.json
``` ```
### Configuration ### Configuration
This module provides some configuration options: This module provides some configuration options:
#### useRelativeSnapshots #### snapshotPath
Set to true in order to store your snapshots for each test run next to the inital test caller rather Sets the default Path for saving Snapshots (default: `cypress/snapshots`)
than at the base working directory.
**Note:** requires the `readFileMaybe` plugin to be configured see https://on.cypress.io/task#Read-a-file-that-might-not-exist
#### snapshotFileName
Set to a string to name your snapshot something other than 'snapshots.js'
#### Usage
Set the configuration options as part of the Cypress config.
See https://docs.cypress.io/guides/references/configuration.html
## Debugging ## Debugging
To debug this module run with environment variable `DEBUG=@cypress/snapshot` To debug this module run with environment variable `DEBUG=@cypress/snapshot`
#
### Small print ### Small print
Author: Gleb Bahmutov &lt;gleb@cypress.io&gt; &copy; Cypress.io 2017 Author: Gleb Bahmutov &lt;gleb@cypress.io&gt; &amp; Joshua D. &lt;[cypress@lio.cat](mailto:cypress@lio.cat)&gt; &copy; Cypress.io 2017-2022
<br>
License: MIT - do anything with the code, but don't blame us if it does not work.
License: MIT - do anything with the code, but don't blame u if it does not work. Support: If you find any problems with this module, email / tweet /
Support: if you find any problems with this module, email / tweet /
[open issue](https://github.com/cypress-io/snapshot/issues) on Github [open issue](https://github.com/cypress-io/snapshot/issues) on Github
## MIT License ## MIT License
Copyright (c) 2017 Cypress.io &lt;gleb@cypress.io&gt; Copyright (c) 2017-2022 Cypress.io &lt;hello@cypress.io&gt;
Permission is hereby granted, free of charge, to any person Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation obtaining a copy of this software and associated documentation