ContactSign inSign up
Contact

Configure visual tests for Cypress

You can enhance your Cypress and Chromatic tests further by configuring them using the options outlined in the following sections.

Cypress options

Cypress can be configured with Cypress environment variables. You can set the available options globally in your Cypress configuration file as follows:

cypress.config.js|ts
export default defineConfig({
  env: {
    // 👇 Sets the option at the project level.
    disableAutoSnapshot: true,
  },
  // Other project configuration options
});

You can also override them for specific tests using via the env option in the test configuration:

cypress/e2e/HomePage.cy.js|ts
describe("HomePage", () => {
  it(
    "Loads the page with auto snapshotting disabled",
    {
      env: {
        // 👇 Overrides the option in the test.
        disableAutoSnapshot: true,
      },
    },
    () => {
      cy.visit("/");
    },
  );
});

E2E options

These options control how the Chromatic archive fixture behaves.

OptionTypeDescription
disableAutoSnapshotbooleanWhen true, it will disable the snapshot that happens automatically at the end of a test when using the Chromatic test fixture.
resourceArchiveTimeoutnumberMaximum amount of time each test will wait for the network to be idle while archiving resources.
assetDomainsarray[string]A list of domains external to the test location that you want Chromatic to also capture assets from, e.g., [‘other-domain.com’,‘our-cdn.com’].

Chromatic options

These options control how Chromatic behaves when capturing snapshots of your pages.

OptionTypeChromatic Docs
delaynumberDelay
diffIncludeAntiAliasingbooleanThreshold for changes
diffThresholdnumberThreshold for changes
ignoreSelectorsarray[string]Ignore elements
forcedColorsstringMedia Features
pauseAnimationAtEndbooleanAnimations
prefersReducedMotionstringMedia Features

Environment variables

Some options can be configured through environment variables.

Environment variableDescription
CHROMATIC_ARCHIVE_LOCATIONIf you have configured your project’s downloadsFolder option to be different than the default, you must set the CHROMATIC_ARCHIVE_LOCATION environment variable to the same value. This ensures that the Chromatic can find the archives generated by Cypress tests.