TESTHEON Practice Lab
AdvancedPW-MOCK-00540 minutesPlaywright

Assert a delayed route fulfilment

An intercepted response may arrive later, but a deterministic test must wait on a visible in-progress state instead of sleeping arbitrarily.

  • network-mocking
  • waits

Objective

What to automate

Delay one route fulfilment for a bounded 150 ms, assert the in-progress status, then assert the fulfilled row.

Preconditions and test data

Preconditions

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

Test data

  • route delay: 150 ms
  • status: Request 1 in progress

Expected result

The fixture first exposes Request 1 in progress and then renders the fulfilled synthetic catalogue result.

Open practice pageRead related guide

Progressive hints

Hint 1

Delay the route handler, not the production fixture.

Hint 2

Click Send catalogue request and immediately assert the status region.

Hint 3

Use a web-first assertion for the fulfilled result.

I’ve tried it — show solution
  1. Delay the route handler, not the production fixture.
  2. Click Send catalogue request and immediately assert the status region.
  3. Use a web-first assertion for the fulfilled result.

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