Data Masking

Dynamic content like timestamps, advertisements, or live data feeds change on every page load, which causes false positives in visual regression tests. RegressionBot provides built-in mechanisms to "mask" these unstable areas before the screenshot is captured.

HTML Attribute (Automatic)

The easiest way to mask content is by adding the data-vr-mask attribute directly to your HTML elements. RegressionBot will automatically find these elements and blank them out during tests.

index.html

<div class="user-profile">
  <h2>Welcome back!</h2>
  <p data-vr-mask>Last logged in: Just now</p>
</div>

Note for Playwright SDK Users: Automatic attribute-based masking is executed by our cloud comparison workers. Since the local Playwright SDK captures screenshots on your local machine before upload, you must explicitly target the attribute in your test options: captureVisual(page, 'key', { mask: ['[data-vr-mask]'] }).

CSS Selectors (SDK / CLI)

If you cannot modify the source HTML, you can pass explicit CSS selectors via the SDK or CLI to mask elements dynamically at runtime.

SDK Example

import { RegressionBot } from '@regressionbot/sdk';

const client = new RegressionBot();

await client.test('https://myapp.com')
  .mask(['.ad-banner', '#dynamic-chart', 'time.relative'])
  .run();

CLI Example

npx @regressionbot/sdk https://myapp.com --mask ".ad-banner,#dynamic-chart"

Custom CSS Injection

For managed (cloud) runs, the customCss option injects arbitrary CSS into the page immediately before the screenshot is taken. Use it when a selector mask isn't enough — most commonly to fully remove a dynamic element rather than blank it in place.

Masks vs. custom CSS. A mask sets the target to visibility: hidden, which blanks the element but keeps its layout box — surrounding content does not move. Injecting display: none via customCss removes the element entirely and reflows the page. For a floating chat widget or a banner you want gone, customCss is usually the right tool; for a fixed-size region whose surroundings should stay put (an ad slot, a chart), prefer a mask.

# Hide a floating chat widget on every run for this project
curl -X PUT https://api.regressionbot.com/project/my-site \
  -H "x-api-key: $REGRESSIONBOT_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "customCss": "#chat-widget { display: none !important; }" }'

customCss is capped at 4096 characters and is available on the REST API, project config, and the run_regression_job / update_project MCP tools. See Capture Options for the full reference.

Common Use Cases

Timestamps & Dates: "Updated 2 minutes ago" or current calendar dates.
Ads: Third-party iframe banners that display differently per request.
Live Data: Stock tickers, analytics charts, or active user counts.
Randomized Content: "Product of the day" or randomized hero images.