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>

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 { Visual } from 'regressionbot';

const visual = new Visual();

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

CLI Example

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

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.