Improve Site Editor performance tests (#48138)

packages/e2e-tests/config/setup-performance-test.js

@@ -26,24 +26,24 @@ async function setupPage() {
 	] );
 }
 
-// Before every test suite run, delete all content created by the test. This ensures
-// other posts/comments/etc. aren't dirtying tests and tests don't depend on
-// each other's side-effects.
+// Before every test suite run, delete all content created by the test. This
+// ensures other posts/comments/etc. aren't dirtying tests and tests don't
+// depend on each other's side-effects.
 beforeAll( async () => {
 	enablePageDialogAccept();
 
 	await trashAllPosts();
 	await trashAllPosts( 'wp_block' );
+	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
 	await clearLocalStorage();
 	await setupPage();
-	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
 } );
 
 afterEach( async () => {
 	// Clear localStorage between tests so that the next test starts clean.
 	await clearLocalStorage();
-	// Close the previous page entirely and create a new page, so that the next test
-	// isn't affected by page unload work.
+	// Close the previous page entirely and create a new page, so that the next
+	// test isn't affected by page unload work.
 	await page.close();
 	page = await browser.newPage();
 	// Set up testing config on new page.

packages/e2e-tests/specs/performance/site-editor.test.js

@@ -26,6 +26,7 @@ import {
 	deleteFile,
 	getTypingEventDurations,
 	getLoadingDurations,
+	sequence,
 } from './utils';
 
 jest.setTimeout( 1000000 );
@@ -46,7 +47,7 @@ const results = {
 	listViewOpen: [],
 };
 
-let id;
+let postId;
 
 describe( 'Site Editor Performance', () => {
 	beforeAll( async () => {
@@ -59,6 +60,7 @@ describe( 'Site Editor Performance', () => {
 		);
 
 		await createNewPost( { postType: 'page' } );
+
 		await page.evaluate( ( _html ) => {
 			const { parse } = window.wp.blocks;
 			const { dispatch } = window.wp.data;
@@ -75,48 +77,47 @@ describe( 'Site Editor Performance', () => {
 		}, html );
 		await saveDraft();
 
-		id = await page.evaluate( () =>
+		postId = await page.evaluate( () =>
 			new URL( document.location ).searchParams.get( 'post' )
 		);
 	} );
 
 	afterAll( async () => {
+		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
+		writeFileSync(
+			join( __dirname, resultsFilename ),
+			JSON.stringify( results, null, 2 )
+		);
+
 		await deleteAllTemplates( 'wp_template' );
 		await deleteAllTemplates( 'wp_template_part' );
 		await activateTheme( 'twentytwentyone' );
 	} );
 
-	beforeEach( async () => {
-		await visitSiteEditor( {
-			postId: id,
-			postType: 'page',
-		} );
-	} );
-
-	it( 'Loading', async () => {
-		const editorURL = await page.url();
-
-		// Number of sample measurements to take.
-		const samples = 3;
-		// Number of throwaway measurements to perform before recording samples.
-		// Having at least one helps ensure that caching quirks don't manifest in
-		// the results.
-		const throwaway = 1;
-
-		let i = throwaway + samples;
-
-		// Measuring loading time.
-		while ( i-- ) {
-			await page.close();
-			page = await browser.newPage();
-
-			await page.goto( editorURL );
-			await page.waitForSelector( '.edit-site-visual-editor', {
-				timeout: 120000,
+	// Number of loading measurements to take.
+	const loadingSamples = 3;
+	// Number of throwaway measurements to perform before recording samples.
+	// Having at least one helps ensure that caching quirks don't manifest
+	// in the results.
+	const loadingSamplesThrowaway = 1;
+	const loadingIterations = sequence(
+		1,
+		loadingSamples + loadingSamplesThrowaway
+	);
+	it.each( loadingIterations )(
+		`Loading (%i of ${ loadingIterations.length })`,
+		async ( i ) => {
+			// Open the test page in Site Editor.
+			await visitSiteEditor( {
+				postId,
+				postType: 'page',
 			} );
-			await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
 
-			if ( i < samples ) {
+			// Wait for the first block.
+			await canvas().waitForSelector( '.wp-block' );
+
+			// Save results.
+			if ( i > loadingSamplesThrowaway ) {
 				const {
 					serverResponse,
 					firstPaint,
@@ -133,52 +134,53 @@ describe( 'Site Editor Performance', () => {
 				results.firstContentfulPaint.push( firstContentfulPaint );
 				results.firstBlock.push( firstBlock );
 			}
+
+			expect( true ).toBe( true );
 		}
-	} );
+	);
 
 	it( 'Typing', async () => {
-		await page.waitForSelector( '.edit-site-visual-editor', {
-			timeout: 120000,
+		// Open the test page in Site Editor.
+		await visitSiteEditor( {
+			postId,
+			postType: 'page',
 		} );
-		await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
 
-		// Measuring typing performance inside the post content.
-		await canvas().waitForSelector(
-			'[data-type="core/post-content"] [data-type="core/paragraph"]'
+		// Wait for the first paragraph to be ready.
+		const firstParagraph = await canvas().waitForXPath(
+			'//p[contains(text(), "Lorem ipsum dolor sit amet")]'
 		);
+
+		// Get inside the post content.
 		await enterEditMode();
-		await canvas().focus(
-			'[data-type="core/post-content"] [data-type="core/paragraph"]'
-		);
+
+		// Insert a new paragraph right under the first one.
+		await firstParagraph.focus();
 		await insertBlock( 'Paragraph' );
-		let i = 200;
+
+		// Start tracing.
 		const traceFile = __dirname + '/trace.json';
 		await page.tracing.start( {
 			path: traceFile,
 			screenshots: false,
 			categories: [ 'devtools.timeline' ],
 		} );
-		while ( i-- ) {
-			await page.keyboard.type( 'x' );
-		}
+
+		// Type "x" 200 times.
+		await page.keyboard.type( new Array( 200 ).fill( 'x' ).join( '' ) );
+
+		// Stop tracing and save results.
 		await page.tracing.stop();
 		const traceResults = JSON.parse( readFile( traceFile ) );
 		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
 			getTypingEventDurations( traceResults );
-
-		for ( let j = 0; j < keyDownEvents.length; j++ ) {
+		for ( let i = 0; i < keyDownEvents.length; i++ ) {
 			results.type.push(
-				keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
+				keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
 			);
 		}
 
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
-
+		// Delete the original trace file.
 		deleteFile( traceFile );
 
 		expect( true ).toBe( true );

packages/e2e-tests/specs/performance/utils.js

@@ -124,3 +124,7 @@ export async function getLoadingDurations() {
 export function sum( arr ) {
 	return arr.reduce( ( a, b ) => a + b, 0 );
 }
+
+export function sequence( start, length ) {
+	return Array.from( { length }, ( _, i ) => i + start );
+}