TESTHEON Practice Lab
BeginnerPW-MOCK-00115 minutesPlaywright

Fulfil a replacement catalogue response

A browser test needs a stable catalogue response without relying on the application API state.

  • network-mocking
  • assertions

Objective

What to automate

Intercept the documented Store catalogue request, fulfil it with a replacement product, and assert the rendered row.

Preconditions and test data

Preconditions

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

Test data

  • method: GET
  • target: /practice/api/v1/store/catalog?featured=1&limit=3
  • replacement id: mock-101

Expected result

The response table shows the replacement mock-101 product and the status reports 200 OK.

Open practice pageRead related guide

Progressive hints

Hint 1

Register the route before pressing Send catalogue request.

Hint 2

Fulfil JSON with a data array containing id, name, and numeric price.

Hint 3

Assert the visible response row instead of an implementation detail.

I’ve tried it — show solution
  1. Register the route before pressing Send catalogue request.
  2. Fulfil JSON with a data array containing id, name, and numeric price.
  3. Assert the visible response row instead of an implementation detail.

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