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

Описание и применение

В тестах Playwright измеряем Core Web Vitals, внедряя PerformanceObserver до навигации, чтобы избежать флуктуаций и проверять реальные показатели.

Задача

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

Результат

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

Рабочий процесс

• 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).

Доказательства

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

Источник

Assert against thresholds with Playwright’s expect.

Источник

Inject observer before navigation to catch early paints.

Источник