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"

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.