Ignore tests and elements

Sometimes a component’s appearance changes every render or contains content like video and animation that is impossible to test consistently. This will trigger visual changes even when the component code hasn’t changed. Ignore tests or DOM elements to tell Chromatic to skip them when looking for changes.

Ignore tests

By default, Chromatic captures snapshots for all your UI components, whether you’re testing with Storybook or with the E2E integration (i.e., Playwright or Cypress), ensuring your UI remains consistent at all times. However, you may want to ignore specific tests that are irrelevant or cause false positives.

With Storybook

If you’re running tests with Storybook, you can enable the disableSnapshot option to configure Chromatic to ignore stories and prevent them from being snapshotted. This is useful if you’re adopting Chromatic incrementally and want to turn off snapshotting for specific stories or work with components that could contain dynamic content or animations that may trigger unwanted visual changes.

// Adjust this import to match your framework (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from "@storybook/your-framework";

/*
 * Replace the @storybook/test package with the following if you are using a version of Storybook earlier than 8.0:
 * import { within } from "@storybook/testing-library";
 * import { expect } from "@storybook/jest";
 */
import { expect, within } from "@storybook/test";

import { NotFound } from "./NotFound";

const meta: Meta<typeof NotFound> = {
  component: NotFound,
  title: "NotFound",
  parameters: {
    // Disables Chromatic's snapshotting on a component level
    chromatic: { disableSnapshot: true },
  },
};

export default meta;
type Story = StoryObj<typeof NotFound>;

export const Default: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await expect(canvas.getByText("Page not found")).toBeInTheDocument();
  },
};

With Playwright or Cypress

By default, Chromatic’s Playwright and Cypress integrations run tests and captures a snapshot at the end of each E2E test; either it passes or fails. However, if you’ve enabled targeted snapshots with Playwright or Cypress to pinpoint visual changes when the test reaches a specific point, you can opt out of the automated snapshotting process by enabling the disableAutoSnapshot configuration option. This is useful when capturing snapshots at specific points in your test, such as when a particular element is visible or when a specific action is performed.

import { expect, takeSnapshot, test } from "@chromatic-com/playwright";

test.describe("Not found", () => {
  test.use({
    disableAutoSnapshot: true, // Disables the automated snapshot generated at the end of the test
  })
  test("should show a 404 page", async ({ page }, testInfo) => {
    await page.goto("/404");

    await expect(page).toHaveTitle("Page not found");
    
    await takeSnapshot(page, 'Initial 404 page', testInfo);

    // Interacts with the page by clicking the "Go back" button 
    await page.getByRole("button", { name: "Go back" }).click();

    await takeSnapshot(page, 'Home page loaded', testInfo);
  });
});

describe("Not found", () => {
  it("should show a 404 page", { env: { 
    disableAutoSnapshot: true // Disables the automated snapshot generated at the end of the test
  }}, () => {
    cy.visit("/404");

    cy.title().should("equal", "Page not found");

    cy.takeSnapshot('Initial 404 page');

     // Interacts with the page by clicking the "Go back" button 
    cy.get("button").contains("Go back").click()

    cy.takeSnapshot('Home page loaded');
  });
});

Ignore DOM elements

To ignore specific elements in your UI, add the .chromatic-ignore class or data-chromatic="ignore" attributes to the elements you want Chromatic to skip. Enabling these attributes notifies Chromatic’s diffing algorithm to disregard the pixels when running your UI tests and comparing snapshots for visual changes, including the element’s bounding box and position (e.g., width, height, and relative positioning).

import React from "react";

interface VideoPlayerProps {
  src: string
  datePublished?: string
}

export const VideoPlayer: React.FC<VideoPlayerProps> = ({
  src,
  datePublished = new Date().toLocaleString(),
}) => {
  return (
    <div>
      <video data-chromatic="ignore" src={src} controls>
        Your browser does not support video tags.
      </video>
      <p className="chromatic-ignore">Published on: {datePublished}</p>
    </div>
  )
}

Frequently asked questions