Cypress Image Diff HTML Report

From Cypress Image Diff version 2, Cypress Image Diff HTML Report is the recommended HTML report over the Legacy HTML report. Cypress Image Diff HTML Report generates a beautiful HTML report out of a JSON file, and offers extensive features:

• Update baseline screenshots

• Toggle between different screenshot inspector modes: carousel, slider, and mirror

• Select your preferred colour scheme

Once you've done the integration part, these quick command lines will be helpful:

• cypress-image-diff-html-report start: to serve the HTML report out of a generated JSON file in an interactive mode, where you can update the baseline screenshots.

• cypress-image-diff-html-report generate: to generate and write to disc the HTML report in case you just want to view the static report.

Or you could integrate the report programmatically:

import { start } from 'cypress-image-diff-html-report'

;(async () => {
  await start({
    configFile: 'custom.config.js',
    serverPort: 3000
    // ...
  })
})()

See here for more details about how to use Cypress Image Diff HTML Report.

If you run the generate command, this following folder structure will be expected:

    .
    ├── cypress-image-diff-html-report
        ├── cypress-image-diff-html-report.html
        ├── report_[datetime].json