TESTHEON Practice Lab
IntermediatePW-VIS-00325 minutesPlaywright

Capture a tablet comparison

A desktop-only snapshot cannot prove the documented responsive layout contract.

  • visual-testing
  • responsive
  • screenshots

Objective

What to automate

Capture v1 at the documented 834 × 1112 tablet viewport.

Preconditions and test data

Preconditions

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

Test data

  • viewport: 834x1112
  • version: v1

Expected result

The tablet screenshot shows two detail columns and the activity panel spanning the row.

Open practice pageRead related guide

Progressive hints

Hint 1

Set the viewport before navigation.

Hint 2

Use the fixed v1 route and wait for fonts.

Hint 3

Compare against a named tablet baseline rather than the desktop image.

I’ve tried it — show solution
  1. Set the viewport before navigation.
  2. Use the fixed v1 route and wait for fonts.
  3. Compare against a named tablet baseline rather than the desktop image.

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