diff --git a/e2e/src/tests/utils/mobile-performance-monitor.spec.ts b/e2e/src/tests/utils/mobile-performance-monitor.spec.ts new file mode 100644 index 0000000..d8646d4 --- /dev/null +++ b/e2e/src/tests/utils/mobile-performance-monitor.spec.ts @@ -0,0 +1,15 @@ +import { test, expect } from '@playwright/test'; +import { MobilePerformanceMonitor } from '../../utils/MobilePerformanceMonitor'; + +test.describe('MobilePerformanceMonitor', () => { + test('should get Core Web Vitals', async ({ page }) => { + await page.goto('/'); + const monitor = new MobilePerformanceMonitor(page); + + const vitals = await monitor.getCoreWebVitals(); + + expect(vitals.FCP).toBeGreaterThan(0); + expect(vitals.LCP).toBeGreaterThan(0); + expect(vitals.CLS).toBeGreaterThanOrEqual(0); + }); +}); \ No newline at end of file diff --git a/e2e/src/utils/MobilePerformanceMonitor.ts b/e2e/src/utils/MobilePerformanceMonitor.ts index c4e12e1..5679738 100644 --- a/e2e/src/utils/MobilePerformanceMonitor.ts +++ b/e2e/src/utils/MobilePerformanceMonitor.ts @@ -15,4 +15,42 @@ export interface LighthouseResult { export class MobilePerformanceMonitor { constructor(private page: Page) {} + + async getCoreWebVitals(): Promise { + const vitals = await this.page.evaluate(() => { + return new Promise((resolve) => { + const metrics: any = {}; + + const observer = new PerformanceObserver((list) => { + for (const entry of list.getEntries()) { + if (entry.entryType === 'paint') { + if (entry.name === 'first-contentful-paint') { + metrics.FCP = entry.startTime; + } + } else if (entry.entryType === 'largest-contentful-paint') { + metrics.LCP = entry.startTime; + } else if (entry.entryType === 'layout-shift') { + if (!metrics.CLS) metrics.CLS = 0; + metrics.CLS += (entry as any).value; + } + } + }); + + observer.observe({ entryTypes: ['paint', 'largest-contentful-paint', 'layout-shift'] }); + + setTimeout(() => { + observer.disconnect(); + resolve(metrics); + }, 5000); + }); + }); + + return { + FCP: vitals.FCP || 0, + LCP: vitals.LCP || 0, + CLS: vitals.CLS || 0, + FID: 0, + TTI: 0, + }; + } } \ No newline at end of file