Add E2E test to test checkout performance

tests/e2e/config/jest.config.js

@@ -11,6 +11,7 @@ const e2ePaths = {
 	wcpay: path.resolve( __dirname, '../specs/wcpay' ),
 	subscriptions: path.resolve( __dirname, '../specs/subscriptions' ),
 	blocks: path.resolve( __dirname, '../specs/blocks' ),
+	performance: path.resolve( __dirname, '../specs/performance' ),
 };
 
 // Allow E2E tests to run specific tests - wcpay, subscriptions, blocks, all (default).

tests/e2e/specs/performance/payment-methods.spec.js

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import config from 'config';
+
+/**
+ * Internal dependencies
+ */
+import { setupProductCheckout } from '../../utils/payments';
+import { shopperWCP } from '../../utils';
+import { getLoadingDurations } from '../../utils/performance';
+
+describe( 'Checkout page performance', () => {
+	beforeEach( async () => {
+		await setupProductCheckout(
+			config.get( 'addresses.customer.billing' )
+		);
+	} );
+
+	afterAll( async () => {
+		// Clear the cart at the end so it's ready for another test
+		await shopperWCP.emptyCart();
+	} );
+
+	it( 'measures on page load', async () => {
+		await page.waitForSelector( '#payment_method_woocommerce_payments' );
+		const {
+			serverResponse,
+			firstPaint,
+			domContentLoaded,
+			loaded,
+			firstContentfulPaint,
+			firstBlock,
+		} = await getLoadingDurations();
+
+		await expect( page ).toMatch( 'Checkout' );
+		console.log(
+			'result',
+			serverResponse,
+			firstPaint,
+			domContentLoaded,
+			loaded,
+			firstContentfulPaint,
+			firstBlock
+		);
+	} );
+} );

tests/e2e/utils/performance.js

@@ -0,0 +1,37 @@
+export async function getLoadingDurations() {
+	return await page.evaluate( () => {
+		const {
+			requestStart,
+			responseStart,
+			responseEnd,
+			domContentLoadedEventEnd,
+			loadEventEnd,
+		} = performance.getEntriesByType( 'navigation' )[ 0 ];
+		const paintTimings = performance.getEntriesByType( 'paint' );
+
+		let firstPaintTimings, firstContentfulPaintTimings;
+
+		paintTimings.forEach( ( item ) => {
+			if ( 'first-paint' === item.name ) {
+				firstPaintTimings = item;
+			}
+			if ( 'first-contentful-paint' === item.name ) {
+				firstContentfulPaintTimings = item;
+			}
+		} );
+
+		return {
+			// Server side metric.
+			serverResponse: responseStart - requestStart,
+			// For client side metrics, consider the end of the response (the
+			// browser receives the HTML) as the start time (0).
+			firstPaint: firstPaintTimings.startTime - responseEnd,
+			domContentLoaded: domContentLoadedEventEnd - responseEnd,
+			loaded: loadEventEnd - responseEnd,
+			firstContentfulPaint:
+				firstContentfulPaintTimings.startTime - responseEnd,
+			// This is evaluated right after Puppeteer found the block selector.
+			firstBlock: performance.now() - responseEnd,
+		};
+	} );
+}