TESTHEON Practice Lab
ExpertPW-VIS-00660 minutesPlaywright

Author a deterministic visual suite

A trustworthy visual suite controls time, fonts, motion, viewport, and semantic expectations.

  • visual-testing
  • automation
  • quality

Objective

What to automate

Write one suite that validates both versions at desktop, tablet, and mobile sizes with reviewed baselines.

Preconditions and test data

Preconditions

  • Use a fresh isolated Practice Lab browser context.
  • Open the fixture identified by FX-VIS-001.

Test data

  • versions: v1, v2
  • viewports: desktop, tablet, mobile

Expected result

The suite waits for local fonts, asserts documented states, disables motion, and maintains six named reviewed screenshots.

Open practice pageRead related guide

Progressive hints

Hint 1

Keep semantic assertions beside every screenshot group.

Hint 2

Wait for document.fonts.ready and use a fixed viewport.

Hint 3

Review changed pixels against the version contract before accepting them.

I’ve tried it — show solution
  1. Keep semantic assertions beside every screenshot group.
  2. Wait for document.fonts.ready and use a fixed viewport.
  3. Review changed pixels against the version contract before accepting them.

The deliberately failing starter is in tests/visual-testing.spec.ts inside the TypeScript starter ZIP.