Playwright Network Throttling and Performance Budget Testing

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

Simulate 3G, 4G, and satellite network conditions to test performance budgets and loading experience across different connection speeds. 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["Performance Test"] --> Throttle["Network Throttle"]
    Throttle --> Load["Page Load"]
    Load --> Measure["Measure LCP/FCP"]
    Measure --> Budget["Budget Check"]

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('homepage loads under 3 seconds on 3G', async ({ page, context }) => {
  // Simulate slow 3G network
  await context.route('**/*', async route => {
    await new Promise(resolve => setTimeout(resolve, 50)); // Add 50ms latency
    await route.continue();
  });

  const startTime = Date.now();
  await page.goto('/', { waitUntil: 'networkidle' });
  const loadTime = Date.now() - startTime;

  expect(loadTime).toBeLessThan(3000);
  await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
});

2. Run and Verify

# Run this specific test file
npx playwright test --grep "Playwright Network Throttling"

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

How to simulate specific network speeds in Playwright?

Use Playwright's CDPSession to set network conditions via emulateNetworkConditions Chrome DevTools Protocol command.

How to measure Core Web Vitals in Playwright tests?

Use page.evaluate() to read window.performance entries and PerformanceObserver data for LCP, FID, and CLS.

Can Playwright enforce performance budgets?

Yes, measure load time or metric values in tests and use expect().toBeLessThan() to enforce budgets.

How to test image optimization and lazy loading performance?

Throttle network, load the page, and measure how quickly below-the-fold images appear during scroll.

How to generate Lighthouse reports from Playwright?

Use the playwright-lighthouse plugin to run Lighthouse audits within Playwright test sessions.

Summary

Simulate 3G, 4G, and satellite network conditions to test performance budgets and loading experience across different connection speeds. By following these patterns, your team can build a reliable, maintainable automation suite that works across environments and handles edge cases gracefully.

Related Articles