# Migrate from v1 to v2

In a mission to provide a robust and easy-to-use visual regression tool for front-end development, **Cypress Image Diff** version 2 introduces [**Cypress Image Diff HTML Report**](https://github.com/kien-ht/cypress-image-diff-html-report) as a separate npm package with extensive features and provides a new compareSnapshot arguments type.

## [New HTML Report](https://github.com/kien-ht/cypress-image-diff-html-report)

<figure><img src="https://2460381240-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FZyBQte7cOp75X6TWkWrZ%2Fuploads%2Fb5k1ULDJIuP0KifbVpmF%2FScreenshot%202023-11-24%20at%2000.56.13.png?alt=media&#x26;token=062cf9ed-a44d-43a2-9b04-0e60125f87da" alt=""><figcaption></figcaption></figure>

We've separated out the core plugin and the HTML report (under the name of **Cypress Image Diff HTML Report**) with the aim of providing a beautiful interactive HTML report with a JSON file with all the details about your test suites, together with extensive features:

* Update baseline screenshots
* Toggle between different screenshot inspector modes: carousel, slider, and mirror
* Select your preferred colour scheme

Although **Cypress Image Diff HTML Report** is a standalone npm package, the [integration](https://cypress.visual-image-diff.dev/getting-started/cypress-integration) with the core Cypress Image Diff is seamless, and they are expected to work together out of the box without any further configuration.

*Note: The old report still continues to function in **Cypress Image Diff** version 2, but it is planned to be deprecated once the **Cypress Image Diff HTML Report** reaches its stable state.*

***

## New compareSnapshot arguments type

* compareSnapshot now could accept new arguments:  cypressScreenshotOptions and exactName
* New global config option: CYPRESS\_SCREENSHOT\_OPTIONS

<pre class="language-javascript"><code class="lang-javascript">// cypress-image-diff v1.32.0 and older
cy.compareSnapshot('header')
cy.compareSnapshot('header', 0.2)
cy.compareSnapshot('header', 0.2, { limit: 6, delay: 1000 })

// cypress-image-diff v2.0.0 and newer
cy.compareSnapshot('header')
cy.compareSnapshot({
  name: 'header',
  testThreshold: 0.2
})
cy.compareSnapshot({
  name: 'header',
  testThreshold: 0.2,
  recurseOptions: { limit: 6, delay: 1000 }
})
cy.compareSnapshot({
  name: 'header',
  testThreshold: 0.2,
  recurseOptions: { limit: 6, delay: 1000 },
  // new custom cypress screenshot options
<strong>  cypressScreenshotOptions: {
</strong>    clip: { x: 0, y: 0, width: 100, height: 100 }
  }
  // new exactName option
  exactName: true
})
</code></pre>

***

## Rename import path

<pre class="language-javascript"><code class="lang-javascript"><strong>🚫 import getCompareSnapshotsPlugin from 'cypress-image-diff-js/dist/plugin';
</strong>✅ import getCompareSnapshotsPlugin from 'cypress-image-diff-js/plugin';

<strong>🚫 import compareSnapshotCommand from 'cypress-image-diff-js/dist/command';
</strong>✅ import compareSnapshotCommand from 'cypress-image-diff-js/command';
</code></pre>

***

## Rename default screenshots and report folder

```
🚫 cypress-visual-screenshots
✅ cypress-image-diff-screenshots

🚫 cypress-visual-report
✅ cypress-image-diff-html-report
```

***

## New config options

* make screenshots and report folder configurable

```javascript
// cypress-image-diff.config.js
const config = {
  REPORT_DIR: 'html-report',
  SCREENSHOTS_DIR: 'visual-screenshots'
};

module.exports = config;
```

*Note: REPORT\_DIR and SCREENSHOTS\_DIR only work for **Cypress Image Diff Html Report,** and this is intentional. Please consider using **Cypress Image Diff Html Report** for better support.*

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cypress.visual-image-diff.dev/migrate-from-v1-to-v2.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.