中文
devexamples
← Workflows

阅读中文版本

Screenshot Visual Baseline Workflow

Capture stable screenshots in a controlled environment, review diffs deliberately, accept intentional changes, and flag unexpected ones.

intermediate~90 mintestingfrontendquality

Objective

Use visual regression testing to catch unintended UI changes without drowning in flaky diffs.

Environment

  • A visual testing tool
  • A deterministic rendering environment

Steps

1. Freeze fonts, viewport, and animations

Freeze fonts, viewport, and animations to make screenshots deterministic.

Expected state: Diffs reflect real changes, not rendering noise.

2. Generate baseline screenshots for key pages

Generate baseline screenshots for key pages and states.

Expected state: There is a reference to compare against.

3. Review each diff and decide intentional

Review each diff and decide intentional versus regression.

Expected state: Changes are approved, not auto-accepted.

4. Update baselines only through review

Update baselines only through review.

Expected state: The baseline does not drift silently.

Decision points

Auto-accept changed snapshots?

  • No, review
  • Yes on passing tests

Never auto-accept; auto-accepting turns the test into a rubber stamp.

Test all pages or key ones?

  • Key pages and states
  • Every page

Key pages plus critical states; testing everything multiplies flaky failures without proportional value.

Expected outcome

Stable visual baselines for key screens with reviewed diffs and no silently accepted regressions.

Verification

Confirm that repeating a run without code changes produces no diff and that a deliberate style change produces an expected, reviewed diff.

Cleanup

Store baselines in version control and record why each was updated.

Overview

Use visual regression testing to catch unintended UI changes without drowning in flaky diffs. Confirm that repeating a run without code changes produces no diff and that a deliberate style change produces an expected, reviewed diff.

Steps

  1. Freeze fonts, viewport, and animations to make screenshots deterministic. Expected state: Diffs reflect real changes, not rendering noise.
  2. Generate baseline screenshots for key pages and states. Expected state: There is a reference to compare against.
  3. Review each diff and decide intentional versus regression. Expected state: Changes are approved, not auto-accepted.
  4. Update baselines only through review. Expected state: The baseline does not drift silently.
npx playwright test visual.spec.ts --update-snapshots
# then review the diff before committing baselines

Verification

  • Stable visual baselines for key screens with reviewed diffs and no silently accepted regressions.

Decision points

  • Auto-accept changed snapshots? Options: No, review; Yes on passing tests. Recommended: Never auto-accept; auto-accepting turns the test into a rubber stamp.
  • Test all pages or key ones? Options: Key pages and states; Every page. Recommended: Key pages plus critical states; testing everything multiplies flaky failures without proportional value.