bahmutov / cypress-toy-visual-testing

A simple local visual testing for Cypress users

@bahmutov/cypress-toy-visual-testing

A simple local visual testing for Cypress users

Install

Add this plugin as a dev dependency

npm i -D @bahmutov/cypress-toy-visual-testing

Set it up from your `` hook in the Cypress config file:

// cypress.config.js

const { defineConfig } = require('cypress')
// https://github.com/bahmutov/cypress-toy-visual-testing
const {
  setupVisualTesting,
} = require('@bahmutov/cypress-toy-visual-testing/dist/plugin/setup')

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      setupVisualTesting(on, config)
      return config
    },
  },
})

Add custom commands to your support file:

// cypress/support/e2e.js

// https://github.com/bahmutov/cypress-toy-visual-testing
import '@bahmutov/cypress-toy-visual-testing/dist/support/commands'

Use

Take full page screenshots

cy.imageDiff('added-todos')

Capture options

• fullPage (default) takes screenshots of the entire page and stitches them into a single image
• viewport takes the screenshot of the currently visible portion
• clipToViewport takes the screenshot of the entire test runner and the clips the image to the viewport.