Metrics: Add a new e2e/metrics folder to start writing some test to collect performance metrics

packages/calypso-e2e/src/lib/pages/editor-page.ts

@@ -204,6 +204,30 @@ export class EditorPage {
 
 	//#region Basic Entry
 
+	/**
+	 * Loads HTML into the editor.
+	 * @param content Content to load.
+	 */
+	async loadHtmlContent( content: string ) {
+		const editorParent = await this.getEditorParent();
+		await editorParent.evaluate( ( _, html ) => {
+			// @ts-expect-error Untyped global variable.
+			const { parse } = window.wp.blocks;
+			// @ts-expect-error Untyped global variable.
+			const { dispatch } = window.wp.data;
+			const blocks = parse( html );
+
+			blocks.forEach( ( block: any ) => {
+				if ( block.name === 'core/image' ) {
+					delete block.attributes.id;
+					delete block.attributes.url;
+				}
+			} );
+
+			dispatch( 'core/block-editor' ).resetBlocks( blocks );
+		}, content );
+	}
+
 	/**
 	 * Selects blank template from the template modal.
 	 */

test/e2e/jest.metrics.config.js

@@ -0,0 +1,10 @@
+const baseConfig = require( '@automattic/calypso-e2e/src/jest-playwright-config' );
+
+module.exports = {
+	...baseConfig,
+	cacheDirectory: '<rootDir>/../../.cache/jest',
+	testMatch: [ '<rootDir>/metrics/**/*.[jt]s' ],
+	transform: {
+		'\\.[jt]sx?$': [ 'babel-jest', { configFile: '../../babel.config.js' } ],
+	},
+};

test/e2e/metrics/editor.spec.ts

@@ -0,0 +1,84 @@
+import { readFileSync } from 'fs';
+import path from 'path';
+import {
+	DataHelper,
+	envVariables,
+	EditorPage,
+	TestAccount,
+	getTestAccountByFeature,
+	envToFeatureKey,
+	PostsPage,
+} from '@automattic/calypso-e2e';
+import { Metrics } from '@wordpress/e2e-test-utils-playwright';
+import { Browser, Page } from 'playwright';
+
+declare const browser: Browser;
+const results: Record< string, number[] > = {};
+
+describe( DataHelper.createSuiteTitle( 'Metrics: Editor' ), function () {
+	const features = envToFeatureKey( envVariables );
+	const accountName = getTestAccountByFeature(
+		features,
+		// The default accounts for gutenberg+simple are `gutenbergSimpleSiteEdgeUser` for GB edge
+		// and `gutenbergSimpleSiteUser` for stable. The criteria below conflicts with the default
+		// one that would return the `gutenbergSimpleSiteUser`. We also can't define it as part of
+		// the default criteria, and should pass it here, as an override. For this specific function
+		// call, `simpleSitePersonalPlanUser` will be retured when gutenberg is stable, and siteType
+		// is simple.
+		[ { gutenberg: 'stable', siteType: 'simple', accountName: 'simpleSitePersonalPlanUser' } ]
+	);
+
+	let page: Page;
+	let editorPage: EditorPage;
+	let postsPage: PostsPage;
+
+	beforeAll( async () => {
+		page = await browser.newPage();
+
+		const testAccount = new TestAccount( accountName );
+		await testAccount.authenticate( page );
+	} );
+
+	it( 'Start and fill a test post', async function () {
+		postsPage = new PostsPage( page );
+		const metrics = await new Metrics( { page } );
+		await postsPage.visit();
+		await postsPage.newPost();
+		editorPage = new EditorPage( page );
+		await editorPage.waitUntilLoaded();
+		const filePath = path.join( __dirname, './fixtures/large-post.html' );
+		await editorPage.loadHtmlContent( readFileSync( filePath, 'utf8' ).trim() );
+		const canvas = await editorPage.getEditorCanvas();
+		await canvas.locator( '.wp-block' ).first().waitFor();
+		await editorPage.enterTitle( 'Test Post' );
+		await editorPage.publish();
+
+		const samples = 2;
+		const throwaway = 1;
+		const iterations = samples + throwaway;
+
+		for ( let i = 1; i <= iterations; i++ ) {
+			await page.reload();
+			editorPage = new EditorPage( page );
+			editorPage.waitUntilLoaded();
+			const canvas = await editorPage.getEditorCanvas();
+			// Wait for the first block.
+			await canvas.locator( '.wp-block' ).first().waitFor();
+			// Get the durations.
+			const loadingDurations = await metrics.getLoadingDurations();
+
+			// Save the results.
+			if ( i > throwaway ) {
+				Object.entries( loadingDurations ).forEach( ( [ metric, duration ] ) => {
+					const metricKey = metric === 'timeSinceResponseEnd' ? 'firstBlock' : metric;
+					if ( ! results[ metricKey ] ) {
+						results[ metricKey ] = [];
+					}
+					results[ metricKey ].push( duration );
+				} );
+			}
+		}
+
+		console.log( results );
+	} );
+} );