Performance tests: Fix canvas locator timeout (#55441)

test/performance/fixtures/perf-utils.ts

@@ -33,26 +33,19 @@ export class PerfUtils {
 	 * @return Locator for the editor canvas element.
 	 */
 	async getCanvas() {
-		return await Promise.any( [
-			( async () => {
-				const legacyCanvasLocator = this.page.locator(
-					'.wp-block-post-content'
-				);
-				await legacyCanvasLocator.waitFor( {
-					timeout: 120_000,
-				} );
-				return legacyCanvasLocator;
-			} )(),
-			( async () => {
-				const iframedCanvasLocator = this.page.frameLocator(
-					'[name=editor-canvas]'
-				);
-				await iframedCanvasLocator
-					.locator( 'body' )
-					.waitFor( { timeout: 120_000 } );
-				return iframedCanvasLocator;
-			} )(),
-		] );
+		const canvasLocator = this.page.locator(
+			'.wp-block-post-content, iframe[name=editor-canvas]'
+		);
+
+		const isFramed = await canvasLocator.evaluate(
+			( node ) => node.tagName === 'IFRAME'
+		);
+
+		if ( isFramed ) {
+			return canvasLocator.frameLocator( ':scope' );
+		}
+
+		return canvasLocator;
 	}
 
 	/**
@@ -61,9 +54,7 @@ export class PerfUtils {
 	 * @return URL of the saved draft.
 	 */
 	async saveDraft() {
-		await this.page
-			.getByRole( 'button', { name: 'Save draft' } )
-			.click( { timeout: 60_000 } );
+		await this.page.getByRole( 'button', { name: 'Save draft' } ).click();
 		await expect(
 			this.page.getByRole( 'button', { name: 'Saved' } )
 		).toBeDisabled();
@@ -75,6 +66,8 @@ export class PerfUtils {
 	 * Disables the editor autosave function.
 	 */
 	async disableAutosave() {
+		await this.page.waitForFunction( () => window?.wp?.data );
+
 		await this.page.evaluate( () => {
 			return window.wp.data
 				.dispatch( 'core/editor' )
@@ -83,12 +76,6 @@ export class PerfUtils {
 					localAutosaveInterval: 100000000000,
 				} );
 		} );
-
-		const { autosaveInterval } = await this.page.evaluate( () => {
-			return window.wp.data.select( 'core/editor' ).getEditorSettings();
-		} );
-
-		expect( autosaveInterval ).toBe( 100000000000 );
 	}
 
 	/**
@@ -139,6 +126,10 @@ export class PerfUtils {
 			throw new Error( `File not found: ${ filepath }` );
 		}
 
+		await this.page.waitForFunction(
+			() => window?.wp?.blocks && window?.wp?.data
+		);
+
 		return await this.page.evaluate( ( html: string ) => {
 			const { parse } = window.wp.blocks;
 			const { dispatch } = window.wp.data;
@@ -159,6 +150,10 @@ export class PerfUtils {
 	 * Generates and loads a 1000 empty paragraphs into the editor canvas.
 	 */
 	async load1000Paragraphs() {
+		await this.page.waitForFunction(
+			() => window?.wp?.blocks && window?.wp?.data
+		);
+
 		await this.page.evaluate( () => {
 			const { createBlock } = window.wp.blocks;
 			const { dispatch } = window.wp.data;

test/performance/playwright.config.ts

@@ -27,6 +27,7 @@ const config = defineConfig( {
 	),
 	use: {
 		...baseConfig.use,
+		actionTimeout: 120_000, // 2 minutes.
 		video: 'off',
 	},
 } );

test/performance/specs/post-editor.spec.js

@@ -70,9 +70,7 @@ test.describe( 'Post Editor Performance', () => {
 				const canvas = await perfUtils.getCanvas();
 
 				// Wait for the first block.
-				await canvas.locator( '.wp-block' ).first().waitFor( {
-					timeout: 120_000,
-				} );
+				await canvas.locator( '.wp-block' ).first().waitFor();
 
 				// Get the durations.
 				const loadingDurations = await metrics.getLoadingDurations();

test/performance/specs/site-editor.spec.js

@@ -86,9 +86,7 @@ test.describe( 'Site Editor Performance', () => {
 				const canvas = await perfUtils.getCanvas();
 
 				// Wait for the first block.
-				await canvas.locator( '.wp-block' ).first().waitFor( {
-					timeout: 120_000,
-				} );
+				await canvas.locator( '.wp-block' ).first().waitFor();
 
 				// Get the durations.
 				const loadingDurations = await metrics.getLoadingDurations();
@@ -142,7 +140,7 @@ test.describe( 'Site Editor Performance', () => {
 					// 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', timeout: 120_000 } );
+				.waitFor( { state: 'hidden' } );
 
 			const canvas = await perfUtils.getCanvas();