Cypress visual regression example (screenshot comparison)

This repo an example of how to use Cypress Image Snapshot plugin

Image Diff

Mochawesome report

• from CircleCI link

TODO

• integrate with CircleCI
• add mochawesome html
  • add failed screenshot to mochawesome html report
• play with Threshold to make tests stable in circleic
• find the way of making full screenshot

addMatchImageSnapshotCommand({
  failureThreshold: 0.03, // threshold for entire image
  failureThresholdType: 'percent', // percent of image or number of pixels
  customDiffConfig: { threshold: 0.1 }, // threshold for each pixel
  capture: 'viewport', // capture viewport in screenshot
});

CircleCI

An example of screenshot diff here in circleci job