Playwright Chaos Testing for Resilient Web Application Validation

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

Inject failures, network disruptions, and random errors into Playwright tests to validate application resilience and recovery mechanisms. 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
    Test["Chaos Test"] --> Inject["Inject Failure"]
    Inject --> App["Application"]
    App --> Retry["Retry Logic"]
    Retry --> Recover["Recovery State"]
    Recover --> 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('app recovers gracefully from API failure', async ({ page }) => {
  let callCount = 0;
  await page.route('/api/data', route => {
    callCount++;
    if (callCount < 3) {
      // Simulate API failure for first 2 calls
      route.abort('failed');
    } else {
      route.fulfill({ json: { items: [{ id: 1, name: 'Item' }] } });
    }
  });
  await page.goto('/dashboard');
  // App should show retry indicator
  await expect(page.getByText('Retrying...')).toBeVisible();
  // Eventually succeeds on 3rd attempt
  await expect(page.getByText('Item')).toBeVisible({ timeout: 10000 });
});

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

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

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

npx playwright show-report

Common Pitfalls

Frequently Asked Questions

What is chaos testing in web applications?

Chaos testing deliberately injects failures to verify the app handles errors gracefully and recovers correctly.

How to simulate random failures in Playwright?

Use Math.random() in route handlers to randomly abort or delay requests with configurable failure rates.

How to test circuit breaker patterns?

Repeatedly fail an endpoint and verify the circuit breaker opens and shows a fallback UI after threshold.

Can Playwright simulate database connection failures?

Yes, intercept your API calls and return 503 Service Unavailable errors to simulate database outages.

How to test exponential backoff retry logic?

Track request timing between retries and assert each retry waits progressively longer before retrying.

Summary

Inject failures, network disruptions, and random errors into Playwright tests to validate application resilience and recovery mechanisms. By following these patterns, your team can build a reliable, maintainable automation suite that works across environments and handles edge cases gracefully.

Related Articles