TESTHEON Practice Lab
AdvancedPW-VIS-00540 minutesPlaywright

Protect the mobile visual contract

Small viewports need their own stable screenshot and readable one-column content order.

  • visual-testing
  • responsive
  • accessibility

Objective

What to automate

Capture v2 at 390 × 844 and assert that the release dashboard remains readable.

Preconditions and test data

Preconditions

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

Test data

  • viewport: 390x844
  • version: v2

Expected result

The mobile baseline stacks summary and detail panels in one column while retaining the teal refreshed state.

Open practice pageRead related guide

Progressive hints

Hint 1

Set the mobile viewport before navigation.

Hint 2

Assert the labelled release summary before capture.

Hint 3

Use the mobile screenshot name so its contract does not hide behind desktop coverage.

I’ve tried it — show solution
  1. Set the mobile viewport before navigation.
  2. Assert the labelled release summary before capture.
  3. Use the mobile screenshot name so its contract does not hide behind desktop coverage.

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