README
Cypress Match Repeat Snapshot
A Cypress plugin aims to test interaction easily.
Install
Install with npm
$ npm install cypress-repeat-snapshot --save-dev
Configure
// cypress/plugins/index
const { addMatchRepeaterPlugin } = require('cypress-repeat-snapshot/lib/plugin');
module.exports = (on, config) => {
addMatchRepeaterPlugin(on, config);
};
// cypress/support/commands
import { addMatchRepeaterCommand } from 'cypress-repeat-snapshot/lib/command';
addMatchRepeaterCommand();
// Command name is `toMatchRepeatSnapshot` by default.
// Options can be passed as a default options here or you can pass it to `toMatchRepeatSnapshot` command.
addMatchRepeaterCommand(commandName, options);
At this point, the command is available.
// sometest.spec.js
cy.toMatchRepeatSnapshot(name, snapshot)
It you need typescript intellisense support, add triple slash directive to your spec file.
/// <reference types="cypress-repeat-snapshot" />
Usage
basic
You can pass the snapshot(JSON file from repeater), then the repeater will run automatically.
// sometest.spec.js
// just take a screenshot
cy.toMatchRepeatSnapshot()
// repeat actions and take a snapshot
cy.toMatchRepeatSnapshot(snapshot)
// repeat actions and take a snapshot whose file name is `snapshotName`
cy.toMatchRepeatSnapshot(snapshotName, snapshot)
// pass options in single test
cy.toMatchRepeatSnapshot(snapshotName, snapshot, options)
// take a screenshot of selected element
cy.get('selector').toMatchRepeatSnapshot(...)
Or you can just write it by yourself, the file will looks like this:
{
"viewport": {
"width": 1000,
"height": 1000,
},
"events": [
{
"type": "mousedown",
"x": 10,
"y": 10,
"ts": 100,
}
]
}
After the test finished, you can check screenshots in /cypress/__repeater__snapshots
.
Options
You can pass any options which is jest-image-snapshot
or cy.screenshot
options.
For example, you can set customSnapshotsDir
or customDiffDir
which is the property of the jest-image-snapshot
's options:
cy.toMatchSnapshot(snapshot, {
customSnapshotsDir: '../__cypress__repeater__snapshots',
customDiffDir: '../__cypress__repeater__snapshots/__diff__output'
})
Custom event properties
Any event properties can be added in repeater JSON file and it will be passed to event triggered.
// repeater.json
{
"type": "mousedown",
"button": 0,
"bubbles": false
}
Updating snapshots
Run Cypress with --env updateSnapshots=true in order to update the base image files for all of your tests.
Preventing failures
Run Cypress with --env failOnSnapshotDiff=false in order to prevent test failures when an image diff does not pass.
Other features
How it works
The workflow of call toMatchRepeatSnapshot(name, json)
:
- dispatch all events from json
- use cypress image snapshot to save and diff screenshot