cypress-repeat-snapshot

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