HSNAKDValidation Labhakdogan.com

Advanced

Network interception

page.route fulfils a deterministic balance so the wallet UI is decoupled from any backend.

User story

As a quality engineer, I want to drive the UI from a deterministic mock so my checks never flake on backend variance.

Acceptance criteria

  • Mock is set up before navigation
  • Network panel shows route.fulfill
  • UI renders the mocked balance
  • Mock cleans up at end of test

Manual test steps

  1. 1.Set up the route
  2. 2.Navigate to /wallet
  3. 3.Assert the mocked balance

Expected result

UI shows $4,099.12 regardless of the live backend state.

Possible bug risks

  • Mock leaks across tests if not cleaned up
  • Glob match too loose, intercepting unrelated requests
  • Body shape drifts from the real contract

Reference Playwright spec

network-interception.spec.ts
ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { test, expect } from '@playwright/test';

test('mock wallet balance via route.fulfill', async ({ page }) => {
  await page.route('**/api/ledger/balance', (route) => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify({ balance: 4099.12, currency: 'USD' }),
    });
  });

  await page.goto('https://lab.hakdogan.com/wallet');
  await expect(page.getByTestId('balance-display')).toContainText('$4,099.12');
});