How to Monitor a Website for Visual Changes While Ignoring Timestamps

To monitor a website for visual changes while ignoring timestamps, configure your visual regression check to exclude the timestamp element alone. Keep the rest of the page under comparison. If the timestamp’s value must still be correct, add a separate functional or text assertion for it.

For Playwright with Applitools Eyes, the documented approach is to pass a locator in ignoreRegions to eyes.check(). If the changing text is widespread and you care more about page structure than its exact content, consider a layout-oriented comparison instead. These approaches answer different questions: an ignore region excludes a specific area; layout matching focuses on structure.

1. Identify what should stay under visual test

Find the timestamp’s DOM element and choose a stable locator, such as a test identifier or a stable CSS selector. Avoid a screen-coordinate rectangle when a DOM locator is available: a fixed rectangle can become misaligned if the layout moves.

Before changing the test, decide which behavior you want:

• Ignore only the changing text: target the smallest stable timestamp element. The surrounding labels, spacing, and adjacent components remain in scope.
• Ignore a timestamp that changes the container’s size: understand how your tool handles the ignored element’s geometry. Chromatic, for example, documents that ignored pixels are bounded by the element’s box and that dimension changes can still trigger a diff.
• Check page structure despite widespread changing content: consider a layout-oriented comparison. This may not verify the timestamp string itself.
• Verify the timestamp’s correctness: keep a functional or text assertion for the expected format or meaning. An ignored visual region cannot establish that its hidden value is correct.

2. Ignore a timestamp in Playwright with Applitools Eyes

In an existing Playwright project configured with the Applitools Eyes Playwright integration, pass the timestamp locator to ignoreRegions. This example assumes the page exposes a stable time[data-testid="updated-at"] element and the Eyes fixture is available in the test.

import { test, expect } from '@playwright/test';

test('homepage remains visually stable when its timestamp changes', async ({ page, eyes }) => {
  await page.goto('https://example.com');

  const timestamp = page.locator('time[data-testid="updated-at"]');
  await expect(timestamp).toBeVisible();

  await eyes.check('Homepage', {
    fully: true,
    matchLevel: 'Strict',
    ignoreRegions: [timestamp],
  });
});

Replace the example URL and selector with your page and locator. The test checks that the timestamp is present, then excludes its region from the visual checkpoint. Configure the Eyes fixture and API key according to the current [Applitools Playwright integration documentation](https://applitools.com/docs/eyes/playwright/integration-with-playwright); this snippet is the checkpoint portion, not a complete project bootstrap.

Keep a separate check for timestamp meaning

If the timestamp should show a valid date or a particular update time, assert that behavior independently. For example, test its format or compare its parsed time against an allowed range appropriate to your application. Do not assert a hard-coded current-time string if the value legitimately changes between runs.

3. Choose a comparison strategy that fits the page

Strategy	Use it when	Trade-off
Narrow ignore region	One timestamp changes, and exact appearance elsewhere matters.	The excluded content is not visually verified. Add another assertion if its value matters.
Layout-oriented comparison	Dynamic text or images vary, but page structure is the main concern.	It may not catch an incorrect timestamp string. Verify important data separately.
Strict comparison with no ignore	The timestamp is deterministic in the test, or its exact appearance is itself under test.	A changing value can create visual diffs even when the surrounding interface is unchanged.

Applitools documents Strict as a match level and provides Layout for checks where structure matters more than specific changing content. Its older support article describes ignore regions and Layout as two ways to handle dynamic content; consult current SDK documentation for the syntax supported by your installed version. [Applitools Playwright integration](https://applitools.com/docs/eyes/playwright/integration-with-playwright) · [Applitools dynamic content guidance](https://help.applitools.com/hc/en-us/articles/360006915412-Dynamic-content)

Other documented selector controls

• Chromatic: its docs describe the .chromatic-ignore class, data-chromatic="ignore", and the ignoreSelectors option. Ignored pixels are within the element’s bounding box, and dimension changes can still cause diffs. See [Chromatic’s ignore-elements documentation](https://www.chromatic.com/docs/ignoring-elements/).
• Percy Playwright: the Percy Playwright client README documents ignoreRegionSelectors, ignoreRegionXpaths, and coordinate-based customIgnoreRegions for snapshots. Check the README for your current package version before adopting its syntax. See [Percy Playwright’s repository](https://github.com/percy/percy-playwright).

These are vendor-documented capabilities, not an independent product comparison. Pick the mechanism that fits the visual testing workflow already in your project.

4. Make the checkpoint repeatable

A useful visual comparison needs comparable captures. Keep the page state and viewport consistent between the baseline and later runs. Wait for the page and the specific content needed by the test to settle; avoid capturing while fonts, images, or layout are still loading. Use the same route, test data, and relevant browser settings where practical.

1. Load the page in the intended test state.
2. Wait for a stable page condition, such as the timestamp element becoming visible.
3. Capture the same viewport or full page each run.
4. Ignore only the timestamp locator, not a nearby parent that also contains meaningful content.
5. Review proposed diffs and update the baseline only when the visual change is intentional.

If your tool supports only a rectangular ignore region, keep it tightly aligned to the timestamp and review it after responsive layout changes. Coordinate masks can drift when content moves. If the timestamp container changes dimensions, determine whether your tool still compares that geometry; Chromatic explicitly says dimension changes to ignored elements can trigger diffs.

5. Review diffs without hiding real regressions

An ignore rule reduces noise, but it also removes evidence from that part of the screenshot. Keep the boundary narrow enough that nearby text, alignment, and spacing remain visible to the comparison. If the timestamp can expand and push other content, check the relevant neighboring layout separately or choose a tool mode that handles displacement in a way that matches your test goal.

Do not automatically approve every diff after adding a mask. Inspect the diff image and confirm that the expected timestamp variation is the only change being suppressed. Keep a distinct assertion for timestamp correctness when it matters.

Or skip the browser setup

For a one-off capture or a visual review that does not need a test runner, [ScreenshotNeo](https://screenshotneo.com) takes a website screenshot through one API request. Its cookie/consent handling removes known consent banners, newsletter popups, and chat widgets before capture; each step can be turned off. The API reports whether a result is a clean shot, bot check, blank page, timeout, failed load, or cache hit, and only clean shots are billed.

Get an API key and see the [ScreenshotNeo API documentation](https://screenshotneo.com/docs/). This example saves a WebP screenshot of the target page:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

ScreenshotNeo also offers an MCP server with screenshot, page-info, and PDF tools for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. A screenshot API gives you an image to inspect or feed into a workflow; it does not replace a visual-regression baseline and diff system when you need automated change detection.

Sign up for 1,000 free screenshots a month, with no card required.

Troubleshooting

Symptom	Likely cause	Fix
The timestamp still creates a diff.	The locator does not target the rendered timestamp, or the tool’s ignore configuration is not applied to this checkpoint.	Confirm the locator matches the visible element, then verify the ignore option and syntax for your installed integration version.
Nearby labels or layout changes stop appearing in diffs.	The ignored selector covers a parent or oversized region.	Target the timestamp element itself and shrink any coordinate boundary. Keep surrounding content outside the ignored area.
A diff appears when the timestamp gets longer.	The element’s dimensions or position changed, which some tools still compare even when its pixels are ignored.	Check your tool’s geometry behavior. Chromatic documents that dimension changes of ignored elements still trigger diffs. Consider stabilizing the container or testing layout separately.
The screenshot is inconsistent across runs.	The page state, viewport, or capture timing differs, or content is still loading.	Use repeatable test data and viewport settings, and wait for the page state needed by the checkpoint.
The visual check passes but the timestamp is wrong.	The timestamp was excluded from the visual comparison, so its text was not validated there.	Add a functional or text assertion for the expected date format or semantics.
A coordinate mask misses the timestamp on mobile.	The page layout changed at a responsive breakpoint.	Prefer a DOM selector if supported. Otherwise use viewport-specific boundaries and review each capture size.

Performance, reliability, and cost

Ignoring one small region usually changes comparison scope rather than the number of page loads or screenshots your suite captures. The practical gains are fewer irrelevant timestamp diffs to review. A layout-oriented mode can reduce sensitivity to dynamic content, but make sure its reduced attention to exact content matches what you intend to verify.

For reliability, make the timestamp selector part of the test contract: assert that it resolves and is visible before the checkpoint. A selector that silently matches nothing can leave the test behaving differently from what reviewers expect. Keep the ignore rule close to the checkpoint configuration and review it when the component markup changes.

Visual testing services may have plan, account, or usage requirements that depend on the provider and current terms. The research sources here do not establish current pricing or account requirements for Applitools, Chromatic, or Percy; check each provider’s current documentation and terms. For ScreenshotNeo, the stated free tier is 1,000 shots monthly with no card, followed by Starter at $5 for 3,000 shots; see its site for plan details.

FAQ

Can I ignore every date on the page with one rule?

You can use a broad selector if that is truly the test goal, but it may hide dates whose visual changes matter. Prefer explicit targets and separately assert important date values.

Should I remove the timestamp from the DOM before taking a screenshot?

Usually, an ignore region is clearer because it leaves the page content in its real state while excluding it from visual comparison. Hiding or removing it changes the captured page and can affect layout.

Does ignoring a timestamp verify that its value is valid?

No. Add a functional or text assertion when timestamp correctness matters.

Is a screenshot API the same as visual regression testing?

No. A screenshot API returns an image. Visual regression testing also needs a baseline, a comparison, and a review or assertion workflow.