Configure visual tests for Playwright

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

Playwright options

The Chromatic Playwright Fixture can be configured with use like all Playwright options.

Setting options globally can be done in your playwright.config.js as follows:

// playwright.config.ts
import { defineConfig } from "@playwright/test";
import { ChromaticConfig } from "@chromatic-com/playwright";

export default defineConfig<ChromaticConfig>({
  use: {
    // ...

    // 👇 your option overrides
    disableAutoSnapshot: true,
  },
  // ... your other configuration
});

// playwright.config.js

import { defineConfig } from "@playwright/test";

export default defineConfig({
  use: {
    // ...

    // 👇 your global options
    disableAutoSnapshot: true,
  },
  // ... your other configuration
});

Options can also be overridden at the test level:

// mytest.spec.js

test.describe("some block", () => {
  // 👇 your option overrides
  test.use({ disableAutoSnapshot: true });

  test("some test", async ({ page }) => {
    // ...
  });
});

E2E options

These options control how the Chromatic archive fixture behaves.

Chromatic options

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

Environment variables

Some options can be configured through environment variables.

Viewports

Chromatic will capture the DOM and take snapshots at each viewport size a test is configured to run in.

Viewports in Playwright can be configured globally in you main playwright config file as follows:

import { defineConfig } from "@playwright/test";
export default defineConfig({
  projects: [
    {
      name: "chromium",
      use: {
        ...devices["Desktop Chrome"],
        viewport: { width: 1280, height: 720 },
      },
    },
    {
      name: "Mobile",
      use: {
        ...devices["Desktop Chrome"],
        viewport: { width: 500, height: 600 },
      },
    },
  ],
});

Or at the test level:

test.use({
  viewport: { width: 1600, height: 1200 },
});

test("my test", async ({ page }) => {
  // ...
});

Working in Monorepos

Often, when using a monorepo, developers tend to keep their e2e tests in a subdirectory instead of in the root of the project. At the same time, the Storybook and Chromatic configuration details live at the project’s root. In these cases, you will need to update the archive-storybook and build-archive-storybook scripts in your package.json by setting the -c flag and CHROMATIC_ARCHIVE_LOCATION environment variable. For example:

"scripts": {
  "archive-storybook": "CHROMATIC_ARCHIVE_LOCATION=path/to/test-results archive-storybook -c path/to/node_modules/@chromaui/archive-storybook/config",
  "build-archive-storybook": "CHROMATIC_ARCHIVE_LOCATION=path/to/test-results build-archive-storybook -c path/to/node_modules/@chromaui/archive-storybook/config"
}