TESTHEON Practice Lab

Component Lab O · Snapshot contracts

Visual Testing Lab

Practise deterministic visual regression testing against fixed v1 and v2 release-review states with local fonts, frozen time, disabled motion, and controlled responsive layouts.

Start the fixtureRead the visual-testing guide

PRACTICE FIXTURE — intentionally built for automation practice

Paired baseline routes

The two routes deliberately differ in a small, documented release-review state.

Baseline v1Purple approved state with five owned checks.Baseline v2Teal refreshed state with six owned checks.

Screenshot guidance

A visual assertion belongs alongside explicit semantic checks; it does not replace them.

  1. Navigate to the route whose version is part of the expected result.
  2. Wait for document.fonts.ready before the screenshot.
  3. Use the documented desktop, tablet, or mobile viewport.
  4. Review the rendered delta instead of blindly updating the baseline.

Passing examples

Start with observable behavior

These snippets match executable tests stored inexamples/playwright-ts/.

A deterministic visual assertion
await page.goto('/practice/components/visual-testing/v1/');
await expect(page.getByTestId('visual-difference-contract')).toContainText(
  'release-state accent uses the Testheon purple baseline',
);
await expect(page).toHaveScreenshot('visual-v1-desktop.png', {
  animations: 'disabled',
  caret: 'hide',
  fullPage: true,
});