https://github.com/haim-io/cypress-image-diff

Visual regression test with cypress
https://github.com/haim-io/cypress-image-diff

Last synced: about 2 months ago
JSON representation

Visual regression test with cypress

• Host: GitHub
• URL: https://github.com/haim-io/cypress-image-diff
• Owner: haim-io
• License: mit
• Created: 2020-10-04T11:16:33.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-07-25T11:41:44.000Z (2 months ago)
• Last Synced: 2024-07-30T16:32:56.746Z (about 2 months ago)
• Language: Handlebars
• Size: 2.12 MB
• Stars: 240
• Watchers: 18
• Forks: 62
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• awesome-cypress - Cypress Image Diff

README

        


	



cypress-image-diff


Visual regression test with cypress

This tool was created to make visual regression as simple as possible, by exposing basic functions that allow you to view the difference between images.

The wrapper uses [pixelmatch](https://github.com/mapbox/pixelmatch) which is simple and powerful and relies on [cypress](https://github.com/cypress-io) to take screenshots.

[![NPM Downloads][npm-downloads-image]][npm-url] [![Version][version-image]][version-url] [![Build Status][circleci-image]][circleci-url] [![BrowserStack Supporter](https://img.shields.io/badge/BrowserStack-Supporter-brightgreen)](https://www.browserstack.com/) [![GitBook Supporter](https://img.shields.io/badge/GitBook-Supporter-brightgreen)](https://www.gitbook.com/)

[npm-downloads-image]: https://badgen.net/npm/dm/cypress-image-diff-js

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

[circleci-url]: https://circleci.com/gh/uktrade/cypress-image-diff/tree/main

[circleci-image]: https://circleci.com/gh/uktrade/cypress-image-diff/tree/main.svg?style=svg

[version-image]: https://img.shields.io/npm/v/cypress-image-diff-js.svg

[version-url]: https://www.npmjs.com/package/cypress-image-diff-js

### Writing a test is as simple as this:

```js

describe('Visuals', () => {

  it('should compare screenshot of the entire page', () => {

    cy.visit('www.google.com')

    cy.compareSnapshot('home-page')

  })

})

```

## Beautiful HTML Report

### Update baseline screenshots with one click



### Support different screenshot inspectors



## [Cypress Image Diff documentation](https://cypress.visual-image-diff.dev/)

Above you will find comprehensive documentation on how to setup this plugin within a cypress test suite