Playwright Testing for WebSocket Real-Time Data Streaming

Modern web applications require thorough testing strategies that account for regional requirements, diverse user bases, and complex technical architectures. This guide provides actionable Playwright patterns for your specific context.

Introduction

Test WebSocket connection lifecycle, message validation, reconnection logic, and streaming data integrity in real-time trading and dashboard apps. This guide covers the essential patterns, configurations, and strategies to handle this scenario reliably in your Playwright test suite.

Understanding the nuances of this topic allows your team to ship with confidence, reduce flakiness, and maintain high-quality automation across different environments.

Architecture Overview

graph TD
    WS["WebSocket Mock"] --> Feed["Price Feed"]
    Feed --> Client["Browser Client"]
    Client --> Update["UI Price Update"]
    Update --> Assert["Assertion"]

This structure ensures clean separation of concerns and maintainable test code.

Implementation Flow

sequenceDiagram
    participant Test as Playwright Test
    participant App as Application
    participant API as Backend / Mock API

    Test->>App: Navigate and interact
    App->>API: Trigger API call
    API-->>App: Return response
    App-->>Test: UI state updated
    Test->>Test: Assert outcome

Step-by-Step Guide

Follow this implementation to set up the pattern in your test suite.

1. Core Implementation

test('WebSocket price feed updates stock prices live', async ({ page }) => {
  // Mock WebSocket price feed
  await page.routeWebSocket('wss://api.trading-app.com/prices', ws => {
    ws.onopen = () => {
      // Send mock price updates
      setInterval(() => {
        ws.send(JSON.stringify({ symbol: 'AAPL', price: 175.50 + Math.random() }));
      }, 1000);
    };
  });

  await page.goto('/trading/AAPL');
  await expect(page.getByTestId('live-price')).toContainText('$175');
  // Verify price updates within 2 seconds
  const firstPrice = await page.getByTestId('live-price').textContent();
  await page.waitForTimeout(1500);
  const secondPrice = await page.getByTestId('live-price').textContent();
  expect(firstPrice).not.toBe(secondPrice); // Price should have updated
});

2. Run and Verify

# Run this specific test file
npx playwright test --grep "Playwright Testing for"

Run with UI mode for debugging
npx playwright test --ui

Run across all browsers
npx playwright test --project=chromium --project=firefox --project=webkit

3. View Test Report

npx playwright show-report

Reference Table

Best Practices

Common Pitfalls

Frequently Asked Questions

What is routeWebSocket in Playwright?

routeWebSocket lets you intercept and mock WebSocket connections, controlling messages sent and received.

How to test WebSocket reconnection logic?

Call ws.close() to simulate a disconnect and verify the app shows a reconnecting indicator and re-establishes the connection.

Can Playwright test binary WebSocket messages?

Yes, send binary data as Buffer or ArrayBuffer through the routeWebSocket handler.

How to test WebSocket authentication in Playwright?

Inspect the initial connection URL or first message for auth tokens using ws.onopen handler.

How to test real-time chart updates from WebSocket?

Mock the WebSocket data feed and verify that chart data points increase or change after each message.

Summary

Test WebSocket connection lifecycle, message validation, reconnection logic, and streaming data integrity in real-time trading and dashboard apps. By following these patterns, your team can build a reliable, maintainable automation suite that works across environments and handles edge cases gracefully.

Related Articles