How do you measure and assert core web vitals or other performance metrics within a Playwright end-to-end test?

Description and use

In Playwright tests, capture Core Web Vitals by injecting a PerformanceObserver before navigation, avoiding flaky timing and asserting realistic thresholds.

Problem

Core Web Vitals (FCP, LCP) are hidden inside the browser; naive waits miss paint events and cause flaky tests and false regressions.

Outcome

The approach reliably captures Core Web Vitals in Playwright tests, eliminating flaky timing and enabling realistic performance assertions.

Workflow

• Inject a PerformanceObserver via page.addInitScript before navigation to capture FCP and LCP.
• Navigate to the target page with page.goto.
• Retrieve the collected metrics from window.__VITALS__ using page.evaluate.
• Assert the metrics with expect to be below project thresholds (e.g., FCP < 2000ms, LCP < 2500ms).

Evidence

Use a PerformanceObserver injected via page.evaluate() to capture FCP and LCP as they fire.

Source

Assert against thresholds with Playwright’s expect.

Source

Inject observer before navigation to catch early paints.

Source