Threshold for changes
The diffThreshold
parameter allows you to fine-tune the threshold for visual change between snapshots before Chromatic flags them. Sometimes you need assurance to the sub-pixel, and other times you want to skip visual noise generated by non-deterministic rendering such as anti-aliasing.
Setting the threshold
Chromatic’s default threshold is .063
, which balances high visual accuracy with low false positives (for example, from artifacts like anti-aliasing). 0
is the most accurate. 1
is the least accurate.
Configure the diffThreshold
with a Storybook parameter like so:
// MyComponent.stories.js|jsx
import { MyComponent } from './MyComponent';
export default {
component: MyComponent,
title: 'MyComponent',
};
const Template = (args) => <MyComponent {...args} />;
export const StoryName = Template.bind({});
StoryName.args = {
with: 'props',
};
StoryName.parameters = {
// Sets the diffThreshold for 0.2 for a specific story.
chromatic: { diffThreshold: 0.2 },
};
Adjusting the diffThreshold
parameter allows Chromatic to detect the most subtle visual change within your component when snapshotted. While accurate for most common scenarios, it can also lead to an inconsistent UI test. For example, setting the parameter to a value of 0.8
can be enough to prevent Chromatic from accurately detecting a change in the component (e.g., positioning).
If you’re unsure which value will be enough; we’ve created an interactive diff tool allowing you to preview how adjusting the parameter impacts your UI tests in real-time.
Anti-aliasing
By default, Chromatic detects anti-aliased pixels and ignores them to prevent false positives. The diffIncludeAntiAliasing
parameter allows you to override this behavior in instances where a single pixel change is not flagged by Chromatic but should be.
Configure the diffIncludeAntiAliasing
with a Storybook parameter like so:
// MyComponent.stories.js|jsx
import { MyComponent } from './MyComponent';
export default {
component: MyComponent,
title: 'MyComponent',
};
const Template = (args) => <MyComponent {...args} />;
export const StoryName = Template.bind({});
StoryName.args = {
with: 'props',
};
StoryName.parameters = {
// Detect anti-aliased pixels
chromatic: { diffIncludeAntiAliasing: true },
};
Troubleshooting
Why weren't diffs found when a color or background changed?
Chromatic uses a threshold to determine how much needs to visually change between snapshots before they get flagged as changes. This prevents false positives due to anti-aliasing and other non-deterministic rendering artifacts.
But our default threshold may result in subtle changes being missed. For instance, nuanced changes to the shade of gray of a background. In this case, you may want to adjust the diffThreshold
to be more accurate (lower value).
Find the right threshold for your UI using our interactive diff tool.