When we think about performance testing, we usually picture big tools with big numbers — JMeter, Gatling, Locust, or Google Lighthouse — hammering backend servers with virtual users or analyzing static audit scores. These tools are great, no doubt. But here’s the twist: what if you could assess your app’s performance like a real user would experience it? like a real user would experience it That’s where Playwright steps in — and no, it’s not just for end-to-end testing anymore. Is Playwright for Performance Testing? Yep, that’s right. You probably already know Playwright as Microsoft’s slick browser automation framework for testing UIs. It runs on Chromium, Firefox, and WebKit — headless or headed — and makes functional testing across browsers a breeze. Playwright But here’s the cool part: Playwright can also act as your window into the front-end performance world. It runs real browsers, executes actual user flows, and lets you measure load times, responsiveness, and resource usage. Let’s dive into how you can turn Playwright into a lightweight performance lab for your app. Playwright for Performance Testing? Performance is about how fast and how smooth your app feels — not just how fast your server responds. Playwright helps you capture that “feel,” thanks to a few key superpowers: how fast how smooth Real Browsers, Real Experience Playwright doesn’t fake it. It spins up actual browser instances, loads your site, runs scripts, fetches resources, and interacts with the UI — just like your users do. That means you can: Capture page load and resource timings
Measure how responsive your UI is to clicks and input
Simulate poor network or device conditions to see how your app performs in the wild Capture page load and resource timings Measure how responsive your UI is to clicks and input Simulate poor network or device conditions to see how your app performs in the wild Cross-Browser Coverage Testing Chrome only? That’s not enough. Playwright lets you compare performance across Chromium, Firefox, and WebKit, which can uncover browser-specific slowdowns or rendering issues. Network and CPU Throttling Want to know how your app performs on a 3G connection or a mid-range device? Playwright supports: Network emulation (e.g., Slow 3G, offline)
CPU throttling (on Chromium) to simulate slower processors Network emulation (e.g., Slow 3G, offline) Network emulation CPU throttling (on Chromium) to simulate slower processors CPU throttling Merge Functional + Performance Tests This is the secret sauce. You can extend your existing functional tests to include performance metrics — without maintaining a separate test suite or learning a new tool. Before we get too excited, let’s be clear about what Playwright doesn’t do: doesn’t Load testing at scale — It runs one browser per test. You won’t simulate 1,000 users hammering your server. Load testing at scale Backend metrics — No server-side CPU, memory, or DB insights. Backend metrics Fancy dashboards — You’ll need to roll your own reports or export to external tools. Fancy dashboards That said, Playwright isn’t trying to replace JMeter or Lighthouse. It’s a complementary tool — and it shines when used right. Measure Page Load Times Here’s a quick way to calculate how long your page takes to fully load: tsCopyEditimport { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const timing = JSON.parse(await page.evaluate(() => JSON.stringify(window.performance.timing)));
  const loadTime = timing.loadEventEnd - timing.navigationStart;

  console.log(`Page load time: ${loadTime} ms`);
  await browser.close();
})(); tsCopyEditimport { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const timing = JSON.parse(await page.evaluate(() => JSON.stringify(window.performance.timing)));
  const loadTime = timing.loadEventEnd - timing.navigationStart;

  console.log(`Page load time: ${loadTime} ms`);
  await browser.close();
})(); Or use the modern PerformanceNavigationTiming API: PerformanceNavigationTiming tsCopyEditconst navTiming = await page.evaluate(() => {
  const [entry] = performance.getEntriesByType('navigation');
  return {
    domContentLoaded: entry.domContentLoadedEventEnd,
    loadEvent: entry.loadEventEnd,
  };
}); tsCopyEditconst navTiming = await page.evaluate(() => {
  const [entry] = performance.getEntriesByType('navigation');
  return {
    domContentLoaded: entry.domContentLoadedEventEnd,
    loadEvent: entry.loadEventEnd,
  };
}); Measure Resource Load Times Track slow-loading images, scripts, or styles: tsCopyEditconst resources = await page.evaluate(() =>
  performance.getEntriesByType('resource').map(r => ({
    name: r.name,
    type: r.initiatorType,
    duration: r.duration,
    size: r.transferSize,
  }))
);

console.table(resources); tsCopyEditconst resources = await page.evaluate(() =>
  performance.getEntriesByType('resource').map(r => ({
    name: r.name,
    type: r.initiatorType,
    duration: r.duration,
    size: r.transferSize,
  }))
);

console.table(resources); This helps you pinpoint bloated assets dragging down your UX. Measure User Interactions Want to know how fast the UI responds after clicking a button? tsCopyEditconst start = Date.now();
await page.click('#submitBtn');
await page.waitForSelector('.result');
const duration = Date.now() - start;

console.log(`UI response time: ${duration} ms`); tsCopyEditconst start = Date.now();
await page.click('#submitBtn');
await page.waitForSelector('.result');
const duration = Date.now() - start;

console.log(`UI response time: ${duration} ms`); Great for measuring AJAX requests or SPA transitions. Simulate Real-World Conditions Throttle the network like it’s 2010: tsCopyEditconst context = await browser.newContext();
const client = await context.newCDPSession(page);

await client.send('Network.emulateNetworkConditions', {
  offline: false,
  downloadThroughput: 400 * 1024 / 8,
  uploadThroughput: 400 * 1024 / 8,
  latency: 400,
}); tsCopyEditconst context = await browser.newContext();
const client = await context.newCDPSession(page);

await client.send('Network.emulateNetworkConditions', {
  offline: false,
  downloadThroughput: 400 * 1024 / 8,
  uploadThroughput: 400 * 1024 / 8,
  latency: 400,
}); Slow down the CPU for realism: tsCopyEditawait client.send('Emulation.setCPUThrottlingRate', { rate: 4 }); // 4x slower tsCopyEditawait client.send('Emulation.setCPUThrottlingRate', { rate: 4 }); // 4x slower Screenshots and Tracing Record visual feedback while testing: tsCopyEditawait page.screenshot({ path: 'before.png' });
await context.tracing.start({ screenshots: true });
await page.goto('https://example.com');
await context.tracing.stop({ path: 'trace.zip' }); tsCopyEditawait page.screenshot({ path: 'before.png' });
await context.tracing.start({ screenshots: true });
await page.goto('https://example.com');
await context.tracing.stop({ path: 'trace.zip' }); Analyze it with the Playwright Trace Viewer. Plug It into Your CI/CD Pipeline Here’s how to bake performance checks into GitHub Actions: yamlCopyEditjobs:
  performance_test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: node performance-test.js yamlCopyEditjobs:
  performance_test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm install
      - run: node performance-test.js You can even set thresholds and fail builds if your app starts slowing down. Best Practices for Performance Testing with Playwright Run in headless mode to speed up tests
Throttle network and CPU to reflect real-world users
Measure multiple times and average results
Store metrics and monitor trends over time
Integrate into your CI/CD pipeline
Use with Lighthouse or k6 for full coverage Run in headless mode to speed up tests headless mode Throttle network and CPU to reflect real-world users Throttle network and CPU Measure multiple times and average results Measure multiple times Store metrics and monitor trends over time monitor trends over time Integrate into your CI/CD pipeline CI/CD pipeline Use with Lighthouse or k6 for full coverage Conclusion Playwright isn’t a silver bullet — it won’t replace your backend stress tests or performance dashboards. But it does give you a powerful, flexible way to measure how real users experience your app — and that’s invaluable. does Whether you're a QA engineer looking to level up your tests or a developer who cares about performance as much as features, adding Playwright to your toolkit brings you one step closer to delivering fast, responsive, and delightful user experiences.

Microsoft

Go Beyond Functional Testing: How to Use Playwright for Front-End Performance Insights

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Build a Modular Selenium + Cucumber Framework in Java

11 Best Automation Testing Tools to Try in 2021

15 Highly-Rated DevOps Tools for 2022

5 Steps for Switching From Manual to Automation Testing

A Quick Introduction to REST API

How to Build a Modular Selenium + Cucumber Framework in Java

11 Best Automation Testing Tools to Try in 2021

15 Highly-Rated DevOps Tools for 2022

5 Steps for Switching From Manual to Automation Testing

A Quick Introduction to REST API

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps