https://github.com/ebazhanov/cypress-image-screenshot-comparison

screenshot comparison + Cypress + Mochawesome report + CircleCI
https://github.com/ebazhanov/cypress-image-screenshot-comparison

circleci cypress cypress-visual-regression mocha mochawesome screenshot screenshot-comparison screenshot-testing snapshot-testing visual-regression-testing

Last synced: 3 months ago
JSON representation

screenshot comparison + Cypress + Mochawesome report + CircleCI

• Host: GitHub
• URL: https://github.com/ebazhanov/cypress-image-screenshot-comparison
• Owner: Ebazhanov
• Created: 2020-03-20T08:57:42.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-07-23T15:36:41.000Z (over 3 years ago)
• Last Synced: 2023-03-03T20:09:33.322Z (almost 2 years ago)
• Topics: circleci, cypress, cypress-visual-regression, mocha, mochawesome, screenshot, screenshot-comparison, screenshot-testing, snapshot-testing, visual-regression-testing
• Language: JavaScript
• Homepage:
• Size: 1.72 MB
• Stars: 6
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Cypress visual regression example (screenshot comparison)

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

[![NPM][npm-icon]][npm-url]

## Image Diff

![diff-example.png](diff-example.png)

## Mochawesome report

- [from CircleCI link](https://38-248710227-gh.circle-artifacts.com/0/mochawesome-report/mochawesome.html) 

#### TODO

- [x] integrate with CircleCI

- [x] 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

```javascript

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 [![CircleCI](https://circleci.com/gh/Ebazhanov/cypress-visual-regression-example.svg?style=svg)](https://circleci.com/gh/Ebazhanov/cypress-visual-regression-example)

#### An example of screenshot diff [here in circleci job](https://20-248710227-gh.circle-artifacts.com/0/cypress/snapshots/failed.test.js/__diff_output__/Visual%20regression%20tests%20--%20should.diff.png)



[npm-icon]: https://nodei.co/npm/cypress-image-snapshot.svg?downloads=true

[npm-url]: https://www.npmjs.com/package/cypress-image-snapshot