Perf Tests: Stabilise the Site Editor metrics (#55922)

WordPress · Nov 7, 2023 · 837374e · 837374e
1 parent 137ad68
commit 837374e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 55 deletions.
diff --git a/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts b/packages/e2e-test-utils-playwright/src/admin/visit-site-editor.ts
@@ -47,7 +47,9 @@ export async function visitSiteEditor(
 	 * loading is done.
 	 */
 	await this.page
-		.locator( '.edit-site-canvas-loader' )
+		// Spinner was used instead of the progress bar in an earlier version of
+		// the site editor.
+		.locator( '.edit-site-canvas-loader, .edit-site-canvas-spinner' )
 		// Bigger timeout is needed for larger entities, for example the large
 		// post html fixture that we load for performance tests, which often
 		// doesn't make it under the default 10 seconds.

diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js
@@ -58,35 +58,32 @@ test.describe( 'Site Editor Performance', () => {
 	} );
 
 	test.describe( 'Loading', () => {
-		let draftURL = null;
+		let draftId = null;
 
-		test( 'Setup the test page', async ( { page, admin, perfUtils } ) => {
+		test( 'Setup the test page', async ( { admin, perfUtils } ) => {
 			await admin.createNewPost( { postType: 'page' } );
 			await perfUtils.loadBlocksForLargePost();
-			await perfUtils.saveDraft();
 
-			await admin.visitSiteEditor( {
-				postId: new URL( page.url() ).searchParams.get( 'post' ),
-				postType: 'page',
-			} );
-
-			draftURL = page.url();
+			draftId = await perfUtils.saveDraft();
 		} );
 
 		const samples = 10;
 		const throwaway = 1;
 		const iterations = samples + throwaway;
 		for ( let i = 1; i <= iterations; i++ ) {
 			test( `Run the test (${ i } of ${ iterations })`, async ( {
-				page,
+				admin,
 				perfUtils,
 				metrics,
 			} ) => {
 				// Go to the test draft.
-				await page.goto( draftURL );
-				const canvas = await perfUtils.getCanvas();
+				await admin.visitSiteEditor( {
+					postId: draftId,
+					postType: 'page',
+				} );
 
 				// Wait for the first block.
+				const canvas = await perfUtils.getCanvas();
 				await canvas.locator( '.wp-block' ).first().waitFor();
 
 				// Get the durations.
@@ -109,44 +106,25 @@ test.describe( 'Site Editor Performance', () => {
 	} );
 
 	test.describe( 'Typing', () => {
-		let draftURL = null;
-
-		test( 'Setup the test post', async ( {
-			page,
-			admin,
-			editor,
-			perfUtils,
-		} ) => {
+		let draftId = null;
+
+		test( 'Setup the test post', async ( { admin, editor, perfUtils } ) => {
 			await admin.createNewPost( { postType: 'page' } );
 			await perfUtils.loadBlocksForLargePost();
 			await editor.insertBlock( { name: 'core/paragraph' } );
-			await perfUtils.saveDraft();
 
+			draftId = await perfUtils.saveDraft();
+		} );
+
+		test( 'Run the test', async ( { admin, perfUtils, metrics } ) => {
+			// Go to the test draft.
 			await admin.visitSiteEditor( {
-				postId: new URL( page.url() ).searchParams.get( 'post' ),
+				postId: draftId,
 				postType: 'page',
 			} );
 
-			draftURL = page.url();
-		} );
-		test( 'Run the test', async ( { page, perfUtils, metrics } ) => {
-			await page.goto( draftURL );
-			await perfUtils.disableAutosave();
-
-			// Wait for the loader overlay to disappear. This is necessary
-			// because the overlay is still visible for a while after the editor
-			// canvas is ready, and we don't want it to affect the typing
-			// timings.
-			await page
-				.locator(
-					// Spinner was used instead of the progress bar in an earlier version of the site editor.
-					'.edit-site-canvas-loader, .edit-site-canvas-spinner'
-				)
-				.waitFor( { state: 'hidden' } );
-
-			const canvas = await perfUtils.getCanvas();
-
 			// Enter edit mode (second click is needed for the legacy edit mode).
+			const canvas = await perfUtils.getCanvas();
 			await canvas.locator( 'body' ).click();
 			await canvas
 				.getByRole( 'document', { name: /Block:( Post)? Content/ } )
@@ -210,19 +188,6 @@ test.describe( 'Site Editor Performance', () => {
 					path: '/wp_template',
 				} );
 
-				// Wait for the loader overlay to disappear. This is necessary
-				// because the overlay is still visible for a while after the editor
-				// canvas is ready, and we don't want it to affect the typing
-				// timings.
-				await page
-					.locator(
-						// Spinner was used instead of the progress bar in an earlier version of the site editor.
-						'.edit-site-canvas-loader, .edit-site-canvas-spinner'
-					)
-					.waitFor( { state: 'hidden' } );
-				// Additional time to ensure the browser is completely idle.
-				// eslint-disable-next-line playwright/no-wait-for-timeout
-
 				// Start tracing.
 				await metrics.startTracing();