WebSocket and Webhook Testing: Real-Time APIs Explained

Not every API waits for you to ask. Live cricket scores, stock tickers, ride tracking and chat are pushed to you over WebSockets; payment confirmations, shipping updates and GitHub events are pushed to your server as webhooks. Both break in ways request-response testing never sees: dropped connections, out-of-order messages, duplicate events, forged signatures. This lesson shows you how to test both, with live echo servers and runnable Playwright code.

Polling vs WebSocket vs Webhook

WebSocket Basics for Testers

1. The client sends an HTTP request with Upgrade: websocket to a wss:// URL.
2. The server answers 101 Switching Protocols. The connection stays open.
3. Both sides exchange messages (text, usually JSON, or binary) in any order.
4. Either side closes with a close code (1000 normal, 1001 going away, 1006 abnormal, 1008 policy violation, 1011 server error).

Many apps add a protocol on top: subscribe/unsubscribe messages, heartbeats (ping/pong), message ids and acknowledgements. Socket.IO, STOMP and GraphQL subscriptions are common higher-level protocols.

Try It: Public Echo Servers

Two free echo servers send back whatever you send, which is perfect for learning:

• wss://echo.websocket.org: first sends a greeting like Request served by 4d896d95b55478, then echoes each message.
• wss://ws.postman-echo.com/raw: echoes immediately.

In Postman

1. New → WebSocket. URL: wss://ws.postman-echo.com/raw. Click Connect.
2. Type {"event":"subscribe","match":"IND-vs-AUS"} and Send.
3. The Messages pane shows sent (up arrow) and received (down arrow) messages with timestamps.
4. Click Disconnect and check the close event.

In the browser console

const ws = new WebSocket('wss://ws.postman-echo.com/raw');
ws.onopen = () => ws.send(JSON.stringify({ ping: 1 }));
ws.onmessage = (e) => console.log('received', e.data);   // received {"ping":1}
ws.onclose = (e) => console.log('closed', e.code);

WebSocket Test Cases

Automating WebSocket Tests in Playwright

For a pure API-level test, use the WebSocket class built into Node.js 22+ inside a Playwright test. A small helper turns events into promises:

import { test, expect } from '@playwright/test';

function openSocket(url: string): Promise<WebSocket> {
  return new Promise((resolve, reject) => {
    const ws = new WebSocket(url);
    ws.onopen = () => resolve(ws);
    ws.onerror = () => reject(new Error(`could not connect to ${url}`));
  });
}

function nextMessage(ws: WebSocket, timeoutMs = 5_000): Promise<string> {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => reject(new Error('no message received')), timeoutMs);
    ws.addEventListener('message', (e) => { clearTimeout(timer); resolve(String(e.data)); }, { once: true });
  });
}

test('echo server returns the exact JSON we send', async () => {
  const ws = await openSocket('wss://ws.postman-echo.com/raw');
  const msg = { event: 'subscribe', match: 'IND-vs-AUS', id: Date.now() };

  const reply = nextMessage(ws);
  ws.send(JSON.stringify(msg));
  expect(JSON.parse(await reply)).toEqual(msg);

  ws.close(1000);
});

test('messages come back in order', async () => {
  const ws = await openSocket('wss://ws.postman-echo.com/raw');
  const received: string[] = [];
  const done = new Promise<void>((resolve) => {
    ws.onmessage = (e) => { received.push(String(e.data)); if (received.length === 5) resolve(); };
  });
  for (let i = 1; i <= 5; i++) ws.send(`ball-${i}`);
  await done;
  expect(received).toEqual(['ball-1', 'ball-2', 'ball-3', 'ball-4', 'ball-5']);
  ws.close();
});

For web apps, Playwright can also watch the browser’s own sockets with page.on('websocket', ws => ws.on('framereceived', ...)) and mock a socket server with page.routeWebSocket(), which is useful when testing how the UI reacts to pushed messages.

Webhook Basics for Testers

A typical webhook request your server receives:

POST /webhooks/payments HTTP/1.1
Content-Type: application/json
X-Signature: 5d7c3e...a91f            (HMAC-SHA256 of the raw body with a shared secret)
X-Event-Id: evt_01JD8K2Q
X-Timestamp: 1794482821

{"event":"payment.captured","payment_id":"pay_123","order_id":"ord_987","amount":229746,"currency":"INR"}

Webhook Test Cases

Tools for capturing webhooks

• webhook.site / RequestBin: get a public URL and see every request sent to it. Don’t send real customer data there.
• ngrok / Cloudflare Tunnel: expose your local server to a provider during development.
• Provider CLIs and dashboards: many payment providers can resend events and show delivery logs.

Testing Webhook Signatures in Code

Most providers sign webhooks with HMAC-SHA256 over the raw body (sometimes with the timestamp). Your receiver recomputes the signature and compares it in constant time. Here’s a self-contained test of that logic:

import { test, expect } from '@playwright/test';
import crypto from 'node:crypto';

const SECRET = 'whsec_test_123';   // test secret; real secrets come from environment variables

const sign = (rawBody: string, timestamp: number) =>
  crypto.createHmac('sha256', SECRET).update(`${timestamp}.${rawBody}`).digest('hex');

function verify(rawBody: string, timestamp: number, signature: string, now = Date.now() / 1000): boolean {
  if (Math.abs(now - timestamp) > 300) return false;                       // replay window: 5 minutes
  const expected = Buffer.from(sign(rawBody, timestamp), 'hex');
  const given = Buffer.from(signature, 'hex');
  return given.length === expected.length && crypto.timingSafeEqual(given, expected);
}

const body = JSON.stringify({ event: 'payment.captured', order_id: 'ord_987', amount: 229746 });
const ts = Math.floor(Date.now() / 1000);

test('valid signature is accepted', () => {
  expect(verify(body, ts, sign(body, ts))).toBe(true);
});

test('tampered body is rejected', () => {
  const tampered = body.replace('229746', '100');
  expect(verify(tampered, ts, sign(body, ts))).toBe(false);
});

test('old (replayed) request is rejected', () => {
  const old = ts - 3600;
  expect(verify(body, old, sign(body, old))).toBe(false);
});

test('duplicate delivery is processed once', () => {
  const processed = new Set<string>();
  const handle = (eventId: string) => { if (processed.has(eventId)) return 'duplicate'; processed.add(eventId); return 'processed'; };
  expect(handle('evt_01JD8K2Q')).toBe('processed');
  expect(handle('evt_01JD8K2Q')).toBe('duplicate');
});

In an integration test, the same sign() helper lets you POST signed fake events straight to your own webhook endpoint with request.post(), so you don’t need the real provider for every run.

Common Bugs in Real-Time APIs

• WebSocket server accepts connections without authentication.
• Client never reconnects after the phone switches from Wi-Fi to mobile data.
• Messages arrive out of order during bursts; UI shows an old score.
• Memory leak: server keeps dead connections forever.
• Webhook signature not checked, or checked on a re-serialised body instead of the raw body.
• Duplicate webhook ships an order twice or credits a wallet twice.
• Webhook handler does slow work synchronously and times out, triggering endless retries.

Interview Questions: WebSocket and Webhook Testing