npm install web-vitals

import { onINP } from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value, metric);
  // metric.attribution gives interaction details (target, eventType, etc.)
});

import { onINP } from 'web-vitals/attribution';

onINP((metric) => {
  console.log('Total INP:', metric.value);
  console.log('Input delay:', metric.attribution.inputDelay);
  console.log('Processing duration:', metric.attribution.processingDuration);
  console.log('Presentation delay:', metric.attribution.presentationDelay);
  console.log('Long animation frame:', metric.attribution.longAnimationFrameEntries);
});

import { test, expect } from '@playwright/test';

test('modal open INP under 200ms', async ({ page }) => {
  await page.addInitScript({ path: 'node_modules/web-vitals/dist/web-vitals.iife.js' });
  await page.goto('https://localhost:3000');

  await page.evaluate(() => {
    (window as any).__inpValues = [];
    (window as any).webVitals.onINP((m: any) => {
      (window as any).__inpValues.push(m.value);
    });
  });

  // The interaction under test
  await page.click('[data-testid="open-modal"]');
  await page.waitForSelector('[role="dialog"]');

  // Force INP to flush. web-vitals finalizes INP inside its own
  // visibilitychange handler, which reads document.visibilityState
  // synchronously (per the [web-vitals README]). Redefine the property to
  // 'hidden' FIRST, THEN dispatch the event: if you dispatch first, the
  // handler still sees 'visible' and never reports.
  await page.evaluate(() => {
    Object.defineProperty(document, 'visibilityState', {
      configurable: true,
      get: () => 'hidden',
    });
    document.dispatchEvent(new Event('visibilitychange'));
  });

  const inps = await page.evaluate(() => (window as any).__inpValues);
  const max = Math.max(...inps);
  expect(max).toBeLessThan(200);
});

test('no long tasks > 50ms during route change', async ({ page }) => {
  // Install the observer BEFORE navigation and push entries onto a
  // window-scoped array. A closure-local array would never reach
  // window.__longTasks, so the later read returns [] and the assertion
  // passes vacuously regardless of real long tasks.
  await page.addInitScript(() => {
    (window as any).__longTasks = [];
    const obs = new PerformanceObserver((list) => {
      for (const e of list.getEntries()) {
        (window as any).__longTasks.push({
          name: e.name, duration: e.duration, startTime: e.startTime,
        });
      }
    });
    // 'longtask' is the Long Tasks API entry type; buffered:true replays
    // tasks recorded before the observer attached (per [MDN longtask]).
    obs.observe({ type: 'longtask', buffered: true });
  });

  await page.goto('https://localhost:3000');
  await page.click('[data-testid="route-link"]');
  await page.waitForLoadState('networkidle');

  const blocking = (await page.evaluate(() => (window as any).__longTasks ?? []))
    .filter((t: any) => t.duration > 50);
  expect(blocking).toEqual([]);
});

# CrUX REST API
curl -X POST 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=<API_KEY>' \
  -H 'Content-Type: application/json' \
  -d '{"url":"https://yoursite.com/","metrics":["interaction_to_next_paint"]}'