data-uiverify-ignore: ignore regions in visual tests

data-uiverify-ignore is UI Verify's ignore region, what other tools call a mask or an exclusion zone. It is a plain HTML attribute that works the same in Storybook stories, Vitest browser-mode tests and Playwright pages, in every browser, mode and viewport, with nothing to install or configure.

Add the data-uiverify-ignore attribute to the element whose content changes between runs. It needs no value: UI Verify masks any element that has the attribute. Give the element a fixed width and height, so new content cannot resize it.

Outside a capture the attribute does nothing, so it is safe to ship in your production bundle. Plain HTML works the same way: <div data-uiverify-ignore>...</div>.

• Painted over, not cropped out. Before each screenshot, UI Verify fills the element's box with solid black. The baseline was masked the same way, so whatever the element shows never reaches the diff, and the screenshot in your review shows a black box where it was.
• Size and position still count. The mask covers the element where it renders, so if the element grows, shrinks or moves, the black box moves with it and that shows as a change. A fixed width and height keep new content from resizing it or pushing the layout around it.
• Everything inside is unchecked. Nothing in the box is compared, so put the attribute on the smallest element that changes, not on a whole card, and the stable parts around it stay under test.
• The mask is the element's box. Anything drawn on top of that box, like a badge or a tooltip, is hidden too, and a child that overflows outside the box is not masked.
• Embeds: mark the frame, not its contents. For a third-party <iframe>, put the attribute on the <iframe> element or its container in your own page.
• Uploaded screenshots are not masked. A custom screenshots project uploads finished images with no page to paint on, so hide or freeze the region before you take the screenshot.

Use an ignore region for content that is supposed to differ between runs and that you cannot pin at the source: an ad slot, a map or another third-party embed, a live stream, a visitor count or ticker on a real page. These are the regions that come back changed on every build even though nothing in your code moved.

An ignore region is the escape hatch, not the first fix. Nothing inside the box is checked, so a real regression there, like a broken layout, the wrong font, or overflowing text, ships unnoticed. When you can make the content deterministic, do that and keep it under test: freeze the clock, feed fixture data, seed the randomness, or branch on `isUIVerify()` to render a fixed frame. See Fix flaky visual tests. A good rule: mask what you do not own or cannot pin, and fix what you wrote.

Yes, it does the same job as Chromatic's data-chromatic="ignore" attribute and .chromatic-ignore class: the pixels inside the element's box are left out of the comparison, and a change to its size or position still shows. UI Verify does not read Chromatic's attribute, class, or ignoreSelectors option at any level (story, component, project, or a Playwright or Vitest config). When you migrate from Chromatic, put data-uiverify-ignore on each element those matched.

Yes. On a story or test with a design baseline, the box is measured on your render and blanked on the design image too, so placeholder content in the mockup and live content in the render both drop out of the comparison. Against a design, the box's own size and position are not checked either.