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

🔥 SDET Interview Scenario of the Day:
How do you measure and assert Core Web Vitals (FCP, LCP) inside a Playwright E2E test without flaky timing?

📌 Problem Statement
• Core Web Vitals reveal real‑user performance but are hidden inside the browser.
• Naïve page.waitForTimeout() or relying on domcontentloaded misses paint events.
• ❌ Relying on arbitrary delays leads to flaky tests and false regressions.

💡 Solution & Code Walkthrough
✅ Use a PerformanceObserver injected via page.evaluate() to capture FCP and LCP as they fire.
✅ Collect metrics into a global variable, then read them after navigation.
✅ Assert against thresholds with Playwright’s expect.

// performanceUtils.ts
import { Page, expect } from '@playwright/test';

export async function collectCoreVitals(page: Page): Promise<{ fcp: number; lcp: number }> {
  // Inject observer before navigation
  await page.addInitScript(() => {
    const vitals: { fcp?: number; lcp?: number } = {};
    new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (entry.name === 'first-contentful-paint') vitals.fcp = entry.startTime;
        if (entry.name === 'largest-contentful-paint') vitals.lcp = entry.startTime;
      }
    }).observe({ entryTypes: ['paint'] });
    // expose for test
    (window as any).__VITALS__ = vitals;
  });

  // Navigate to target page
  await page.goto('https://example.com');

  // Retrieve metrics
  const vitals = await page.evaluate(() => (window as any).__VITALS__);
  expect(vitals.fcp).toBeLessThan(2000); // 2s threshold example
  expect(vitals.lcp).toBeLessThan(2500);
  return { fcp: vitals.fcp!, lcp: vitals.lcp! };
}

🔑 Key Takeaways
• Inject observer before navigation to catch early paints.
• Use addInitScript or page.evaluate() to run once per context.
• ✅ Assert with realistic thresholds; adjust per‑project.
• ❌ Avoid waitForTimeout – it hides real performance issues.

❓ Quick Summary Q&A
Q: Do I need to wait for networkidle?

A: No. The observer captures paint events independently of network state.

Q: Can I collect CLS or TTFB?

A: Yes – extend the observer with layout-shift and navigation entry types.

Q: Is this reliable across browsers?

A: Playwright uses the same Chromium/WebKit/Firefox APIs; the observer works in all supported browsers.

TAGS: playwright, typescript, web-vitals, performance-testing

────────────────────────────────────────
────────────────────────────────────────

📲 𝐅𝐑𝐄𝐄 𝐌𝐎𝐁𝐈𝐋𝐄 𝐀𝐏𝐏 — 𝟔𝟎𝟎+ 𝐒𝐃𝐄𝐓 𝐐&𝐀𝐬
Practice real-world interview scenarios offline on the free QA Automation & SDET Prep app:

🤖 𝐆𝐨𝐨𝐠𝐥𝐞 𝐏𝐥𝐚𝐲 (𝐀𝐧𝐝𝐫𝐨𝐢𝐝):
https://play.google.com/store/apps/details?id=com.app.seleniuminterviewquestions&referrer=utm_source%3Ddevto%26utm_medium%3Darticle%26utm_campaign%3Dselenium_20261002

🍎 𝐀𝐩𝐩 𝐒𝐭𝐨𝐫𝐞 (𝐢𝐎𝐒):
https://apps.apple.com/app/id6786760948?pt=128640464&ct=devto_selenium_20261002&mt=8

────────────────────────────────────────
────────────────────────────────────────