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.
Setting options globally can be done in your Cypress config file as follows:
// cypress.config.ts
export default defineConfig({
env: {
disableAutoSnapshot: true,
},
// other setup...
});
Options can also be overridden at the test level:
// some-test.cy.ts
it("A test that does something", { env: { disableAutoSnapshot: true } }, () => {
cy.visit("https://some-url.com");
});
E2E options
These options control how the Chromatic archive fixture behaves.
Option | Type | Description |
---|---|---|
disableAutoSnapshot | boolean | When true , will disable the snapshot that happens automatically at the end of a test when using the Chromatic test fixture. |
resourceArchiveTimeout | number | Maximum amount of time that each test will wait for the network to be idle while archiving resources. |
assetDomains | array[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.
Option | Type | Chromatic Docs |
---|---|---|
delay | number | Delay |
diffIncludeAntiAliasing | boolean | Threshold for changes |
diffThreshold | number | Threshold for changes |
forcedColors | string | Media Features |
pauseAnimationAtEnd | boolean | Animations |
prefersReducedMotion | string | Media Features |
Environment variables
Some options can be configured through environment variables.
Environment variable | Description |
---|---|
CHROMATIC_ARCHIVE_LOCATION | If 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. |
Viewports
Chromatic will capture the DOM and take snapshots at each viewport size a test is configured to run in.
Viewports in Cypress can be configured globally in you main cypress config file as follows:
import { defineConfig } from "cypress";
export default defineConfig({
viewportWidth: 1000,
viewportHeight: 660,
});
Or using configuration at the test level:
describe(
"page display on medium size screen",
{
viewportHeight: 1000,
viewportWidth: 400,
},
() => {
it("does not display sidebar", () => {
// ...
});
},
);
Note: Currently, setting the viewport using cy.viewport()
is not supported.