E2E Test Utils: Add new fixtures for performance metrics

package.json

@@ -221,6 +221,7 @@
 		"node-watch": "0.7.0",
 		"npm-run-all": "4.1.5",
 		"patch-package": "6.2.2",
+		"playwright": "1.32.0",
 		"postcss": "8.4.16",
 		"postcss-loader": "6.2.1",
 		"prettier": "npm:wp-prettier@2.8.5",

packages/e2e-test-utils-playwright/package.json

@@ -35,10 +35,13 @@
 		"@wordpress/url": "file:../url",
 		"change-case": "^4.1.2",
 		"form-data": "^4.0.0",
+		"get-port": "^5.1.1",
+		"lighthouse": "^10.4.0",
 		"mime": "^3.0.0"
 	},
 	"peerDependencies": {
-		"@playwright/test": ">=1"
+		"@playwright/test": ">=1",
+		"playwright": ">=1"
 	},
 	"publishConfig": {
 		"access": "public"

packages/e2e-test-utils-playwright/src/index.ts

@@ -3,4 +3,5 @@ export { Admin } from './admin';
 export { Editor } from './editor';
 export { PageUtils } from './page-utils';
 export { RequestUtils } from './request-utils';
+export { Metrics } from './metrics';
 export { test, expect } from './test';

packages/e2e-test-utils-playwright/src/metrics/index.ts

@@ -0,0 +1,160 @@
+/**
+ * External dependencies
+ */
+import type { Page } from '@playwright/test';
+import * as lighthouse from 'lighthouse/core/index.cjs';
+
+export class Metrics {
+	constructor( public readonly page: Page, public readonly port: number ) {
+		this.page = page;
+		this.port = port;
+	}
+
+	/**
+	 * Returns durations from the Server-Timing header.
+	 *
+	 * @param fields Optional fields to filter.
+	 */
+	async getServerTiming( fields: string[] = [] ) {
+		return this.page.evaluate< Record< string, number >, string[] >(
+			( f: string[] ) =>
+				(
+					performance.getEntriesByType(
+						'navigation'
+					) as PerformanceNavigationTiming[]
+				 )[ 0 ].serverTiming.reduce( ( acc, entry ) => {
+					if ( f.length === 0 || f.includes( entry.name ) ) {
+						acc[ entry.name ] = entry.duration;
+					}
+					return acc;
+				}, {} as Record< string, number > ),
+			fields
+		);
+	}
+
+	/**
+	 * Returns time to first byte (TTFB) using the Navigation Timing API.
+	 *
+	 * @see https://web.dev/ttfb/#measure-ttfb-in-javascript
+	 *
+	 * @return {Promise<number>} TTFB value.
+	 */
+	async getTimeToFirstByte() {
+		return this.page.evaluate< number >(
+			() =>
+				new Promise( ( resolve ) => {
+					new PerformanceObserver( ( entryList ) => {
+						const [ pageNav ] = entryList.getEntriesByType(
+							'navigation'
+						) as PerformanceNavigationTiming[];
+
+						resolve( pageNav.responseStart );
+					} ).observe( {
+						type: 'navigation',
+						buffered: true,
+					} );
+				} )
+		);
+	}
+
+	/**
+	 * Returns the Largest Contentful Paint (LCP) value using the dedicated API.
+	 *
+	 * @see https://w3c.github.io/largest-contentful-paint/
+	 * @see https://web.dev/lcp/#measure-lcp-in-javascript
+	 *
+	 * @return {Promise<number>} LCP value.
+	 */
+	async getLargestContentfulPaint() {
+		return this.page.evaluate< number >(
+			() =>
+				new Promise( ( resolve ) => {
+					new PerformanceObserver( ( entryList ) => {
+						const entries = entryList.getEntries();
+						// The last entry is the largest contentful paint.
+						const largestPaintEntry = entries.at( -1 );
+
+						resolve( largestPaintEntry?.startTime || 0 );
+					} ).observe( {
+						type: 'largest-contentful-paint',
+						buffered: true,
+					} );
+				} )
+		);
+	}
+
+	/**
+	 * Returns the Cumulative Layout Shift (CLS) value using the dedicated API.
+	 *
+	 * @see https://github.com/WICG/layout-instability
+	 * @see https://web.dev/cls/#measure-layout-shifts-in-javascript
+	 *
+	 * @return {Promise<number>} CLS value.
+	 */
+	async getCumulativeLayoutShift() {
+		return this.page.evaluate< number >(
+			() =>
+				new Promise( ( resolve ) => {
+					let CLS = 0;
+
+					new PerformanceObserver( ( l ) => {
+						const entries = l.getEntries() as LayoutShift[];
+
+						entries.forEach( ( entry ) => {
+							if ( ! entry.hadRecentInput ) {
+								CLS += entry.value;
+							}
+						} );
+
+						resolve( CLS );
+					} ).observe( {
+						type: 'layout-shift',
+						buffered: true,
+					} );
+				} )
+		);
+	}
+
+	/**
+	 * Returns the Lighthouse report for the current URL.
+	 *
+	 * Runs several Lighthouse audits in a separate browser window and returns
+	 * the summary.
+	 */
+	async getLighthouseReport() {
+		// From https://github.com/GoogleChrome/lighthouse/blob/d149e9c1b628d5881ca9ca451278d99ff1b31d9a/core/config/default-config.js#L433-L503
+		const audits = {
+			'largest-contentful-paint': 'LCP',
+			'total-blocking-time': 'TBT',
+			interactive: 'TTI',
+			'cumulative-layout-shift': 'CLS',
+			'experimental-interaction-to-next-paint': 'INP',
+		};
+
+		const report = await lighthouse(
+			this.page.url(),
+			{ port: this.port },
+			{
+				extends: 'lighthouse:default',
+				settings: {
+					// Only run certain audits to speed things up.
+					onlyAudits: Object.keys( audits ),
+				},
+			}
+		);
+
+		const result: Record< string, number > = {};
+
+		if ( ! report ) {
+			return result;
+		}
+
+		const { lhr } = report;
+
+		for ( const [ audit, acronym ] of Object.entries( audits ) ) {
+			result[ acronym ] = lhr.audits[ audit ]?.numericValue || 0;
+		}
+
+		return result;
+	}
+}

packages/e2e-test-utils-playwright/src/test.ts

@@ -4,11 +4,13 @@
 import * as path from 'path';
 import { test as base, expect } from '@playwright/test';
 import type { ConsoleMessage } from '@playwright/test';
+import { type Browser, chromium } from 'playwright';
+import * as getPort from 'get-port';
 
 /**
  * Internal dependencies
  */
-import { Admin, Editor, PageUtils, RequestUtils } from './index';
+import { Admin, Editor, PageUtils, RequestUtils, Metrics } from './index';
 
 const STORAGE_STATE_PATH =
 	process.env.STORAGE_STATE_PATH ||
@@ -103,9 +105,12 @@ const test = base.extend<
 		editor: Editor;
 		pageUtils: PageUtils;
 		snapshotConfig: void;
+		metrics: Metrics;
 	},
 	{
 		requestUtils: RequestUtils;
+		port: number;
+		browser: Browser;
 	}
 >( {
 	admin: async ( { page, pageUtils }, use ) => {
@@ -140,6 +145,27 @@ const test = base.extend<
 		},
 		{ scope: 'worker', auto: true },
 	],
+	port: [
+		async ( {}, use ) => {
+			const port = await getPort();
+			await use( port );
+		},
+		{ scope: 'worker' },
+	],
+	browser: [
+		async ( { port }, use ) => {
+			const browser = await chromium.launch( {
+				args: [ `--remote-debugging-port=${ port }` ],
+			} );
+			await use( browser );
+
+			await browser.close();
+		},
+		{ scope: 'worker' },
+	],
+	metrics: async ( { page, port }, use ) => {
+		await use( new Metrics( page, port ) );
+	},
 } );
 
 export { test, expect };

packages/e2e-test-utils-playwright/src/types.ts

@@ -3,6 +3,23 @@ declare global {
 		// Silence the warning for `window.wp` in Playwright's evaluate functions.
 		wp: any;
 	}
+
+	interface LayoutShiftAttribution {
+		readonly node: Node;
+		readonly previousRect: DOMRectReadOnly;
+		readonly currentRect: DOMRectReadOnly;
+		readonly toJSON: () => string;
+	}
+	interface LayoutShift extends PerformanceEntry {
+		readonly duration: number;
+		readonly entryType: 'layout-shift';
+		readonly name: 'layout-shift';
+		readonly startTime: DOMHighResTimeStamp;
+		readonly value: number;
+		readonly hadRecentInput: boolean;
+		readonly lastInputTime: DOMHighResTimeStamp;
+		readonly sources: LayoutShiftAttribution[];
+	}
 }
 
 export {};

packages/e2e-test-utils-playwright/tsconfig.json

@@ -4,6 +4,8 @@
 		"incremental": false,
 		"composite": false,
 		"module": "CommonJS",
+		"moduleResolution": "node16",
+		"skipLibCheck": true,
 		"types": [ "node" ],
 		"rootDir": "src",
 		"noEmit": false,

test/performance/specs/front-end-block-theme.spec.js

@@ -24,44 +24,15 @@ test.describe( 'Front End Performance', () => {
 		await requestUtils.activateTheme( 'twentytwentyone' );
 	} );
 
-	test( 'Report TTFB, LCP, and LCP-TTFB', async ( { page } ) => {
+	test( 'Report TTFB, LCP, and LCP-TTFB', async ( { page, metrics } ) => {
 		let i = 16;
 		while ( i-- ) {
 			// Go to the base URL.
 			await page.goto( '/', { waitUntil: 'networkidle' } );
 
 			// Take the measurements.
-			const [ lcp, ttfb ] = await page.evaluate( () => {
-				return Promise.all( [
-					// Measure the Largest Contentful Paint time.
-					// Based on https://www.checklyhq.com/learn/headless/basics-performance#largest-contentful-paint-api-largest-contentful-paint
-					new Promise( ( resolve ) => {
-						new PerformanceObserver( ( entryList ) => {
-							const entries = entryList.getEntries();
-							// The last entry is the largest contentful paint.
-							const largestPaintEntry = entries.at( -1 );
-
-							resolve( largestPaintEntry.startTime );
-						} ).observe( {
-							type: 'largest-contentful-paint',
-							buffered: true,
-						} );
-					} ),
-					// Measure the Time To First Byte.
-					// Based on https://web.dev/ttfb/#measure-ttfb-in-javascript
-					new Promise( ( resolve ) => {
-						new PerformanceObserver( ( entryList ) => {
-							const [ pageNav ] =
-								entryList.getEntriesByType( 'navigation' );
-
-							resolve( pageNav.responseStart );
-						} ).observe( {
-							type: 'navigation',
-							buffered: true,
-						} );
-					} ),
-				] );
-			} );
+			const lcp = await metrics.getLargestContentfulPaint();
+			const ttfb = await metrics.getTimeToFirstByte();
 
 			// Ensure the numbers are valid.
 			expect( lcp ).toBeGreaterThan( 0 );

test/performance/specs/front-end-classic-theme.spec.js

@@ -23,44 +23,15 @@ test.describe( 'Front End Performance', () => {
 		saveResultsFile( __filename, results );
 	} );
 
-	test( 'Measure TTFB, LCP, and LCP-TTFB', async ( { page } ) => {
+	test( 'Measure TTFB, LCP, and LCP-TTFB', async ( { page, metrics } ) => {
 		let i = 16;
 		while ( i-- ) {
 			// Go to the base URL.
 			await page.goto( '/', { waitUntil: 'networkidle' } );
 
 			// Take the measurements.
-			const [ lcp, ttfb ] = await page.evaluate( () => {
-				return Promise.all( [
-					// Measure the Largest Contentful Paint time.
-					// Based on https://www.checklyhq.com/learn/headless/basics-performance#largest-contentful-paint-api-largest-contentful-paint
-					new Promise( ( resolve ) => {
-						new PerformanceObserver( ( entryList ) => {
-							const entries = entryList.getEntries();
-							// The last entry is the largest contentful paint.
-							const largestPaintEntry = entries.at( -1 );
-
-							resolve( largestPaintEntry.startTime );
-						} ).observe( {
-							type: 'largest-contentful-paint',
-							buffered: true,
-						} );
-					} ),
-					// Measure the Time To First Byte.
-					// Based on https://web.dev/ttfb/#measure-ttfb-in-javascript
-					new Promise( ( resolve ) => {
-						new PerformanceObserver( ( entryList ) => {
-							const [ pageNav ] =
-								entryList.getEntriesByType( 'navigation' );
-
-							resolve( pageNav.responseStart );
-						} ).observe( {
-							type: 'navigation',
-							buffered: true,
-						} );
-					} ),
-				] );
-			} );
+			const lcp = await metrics.getLargestContentfulPaint();
+			const ttfb = await metrics.getTimeToFirstByte();
 
 			// Ensure the numbers are valid.
 			expect( lcp ).toBeGreaterThan( 0 );