Playwright Performance Reporter

@emorio/playwright-performance exports performance observations from Playwright as Prometheus/OpenMetrics text.

Configuration

The performance option augments Playwright's TestOptions. Load that augmentation in playwright.config.ts by typing the performance options with the public type:

import type { PerformanceOptions } from "@emorio/playwright-performance";
import { defineConfig } from "@playwright/test";

const performance: PerformanceOptions = {
  http: { enabled: true, exclude: ["**/*.css", "**/*.js", "**/*.png"] },
  browser: { enabled: true },
};

export default defineConfig({
  use: {
    performance,
  },
  reporter: [
    ["html"],
    [
      "@emorio/playwright-performance/reporter",
      { outputFile: "./performance/playwright-performance.prom" },
    ],
  ],
});

The type import is erased from the emitted JavaScript and has no runtime cost. Tests import expect and test from the package:

import { expect, test } from "@emorio/playwright-performance";

Grafana dashboard

Import grafana/dashboards/playwright-performance.json into Grafana and select the Prometheus datasource. It provides:

• Test-duration p50 and p95 trends, plus the slowest tests in the latest execution.
• HTTP duration and TTFB p95 trends, error rate, and slowest HTTP requests.
• Browser navigation timing and FCP/LCP p75 trends.
• Project, test, method, and URL filters.

The percentile panels use the histogram buckets emitted by the reporter, as with k6 dashboards. They aggregate matching observations for each execution; they do not average precomputed percentiles.

Preserving execution history

The reporter generates a snapshot (playwright-performance.prom) at the end of a test run. Prometheus must ingest that snapshot once per run and retain its sample timestamp to make the time-series panels meaningful. Repeatedly scraping an unchanged file creates a flat line between runs rather than additional executions.

Use an ingestion path suitable for short-lived batch jobs, such as a CI metrics gateway or remote-write importer. Attach stable CI context labels such as branch or environment in that ingestion layer when useful for querying. Do not add an unbounded run_id label unless its retention and cleanup are controlled.

The url label intentionally contains the real request URL. Filter static assets and avoid dynamic URL paths where possible, because each distinct URL creates a Prometheus series.