Improve Site Editor performance tests

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,112 +77,114 @@ 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.
+	describe( 'Loading', () => {
+		// Number of 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.
+		// Having at least one helps ensure that caching quirks don't manifest
+		// in the results.
 		const throwaway = 1;
+		const iterations = sequence( 1, samples + throwaway );
+
+		it.each( iterations )(
+			`trace large post loading durations (%i of ${ iterations.length })`,
+			async ( i ) => {
+				// Open the test page in Site Editor.
+				await visitSiteEditor( {
+					postId,
+					postType: 'page',
+				} );
+
+				// Wait for the first block.
+				await canvas().waitForSelector( '.wp-block' );
+
+				// Save results.
+				if ( i > throwaway ) {
+					const {
+						serverResponse,
+						firstPaint,
+						domContentLoaded,
+						loaded,
+						firstContentfulPaint,
+						firstBlock,
+					} = await getLoadingDurations();
+
+					results.serverResponse.push( serverResponse );
+					results.firstPaint.push( firstPaint );
+					results.domContentLoaded.push( domContentLoaded );
+					results.loaded.push( loaded );
+					results.firstContentfulPaint.push( firstContentfulPaint );
+					results.firstBlock.push( firstBlock );
+				}
 
-		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,
-			} );
-			await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
-
-			if ( i < samples ) {
-				const {
-					serverResponse,
-					firstPaint,
-					domContentLoaded,
-					loaded,
-					firstContentfulPaint,
-					firstBlock,
-				} = await getLoadingDurations();
-
-				results.serverResponse.push( serverResponse );
-				results.firstPaint.push( firstPaint );
-				results.domContentLoaded.push( domContentLoaded );
-				results.loaded.push( loaded );
-				results.firstContentfulPaint.push( firstContentfulPaint );
-				results.firstBlock.push( firstBlock );
+				expect( true ).toBe( true );
 			}
-		}
+		);
 	} );
 
-	it( 'Typing', async () => {
-		await page.waitForSelector( '.edit-site-visual-editor', {
-			timeout: 120000,
-		} );
-		await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
+	describe( 'Typing', () => {
+		it( 'trace 200 characters typing sequence inside a large post', async () => {
+			// Open the test page in Site Editor.
+			await visitSiteEditor( {
+				postId,
+				postType: 'page',
+			} );
 
-		// Measuring typing performance inside the post content.
-		await canvas().waitForSelector(
-			'[data-type="core/post-content"] [data-type="core/paragraph"]'
-		);
-		await enterEditMode();
-		await canvas().focus(
-			'[data-type="core/post-content"] [data-type="core/paragraph"]'
-		);
-		await insertBlock( 'Paragraph' );
-		let i = 200;
-		const traceFile = __dirname + '/trace.json';
-		await page.tracing.start( {
-			path: traceFile,
-			screenshots: false,
-			categories: [ 'devtools.timeline' ],
-		} );
-		while ( i-- ) {
-			await page.keyboard.type( 'x' );
-		}
-		await page.tracing.stop();
-		const traceResults = JSON.parse( readFile( traceFile ) );
-		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
-			getTypingEventDurations( traceResults );
-
-		for ( let j = 0; j < keyDownEvents.length; j++ ) {
-			results.type.push(
-				keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
+			// Wait for the first paragraph to be ready.
+			const firstParagraph = await canvas().waitForXPath(
+				'//p[contains(text(), "Lorem ipsum dolor sit amet")]'
 			);
-		}
 
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
+			// Get inside the post content.
+			await enterEditMode();
 
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
+			// Insert a new paragraph right under the first one.
+			await firstParagraph.focus();
+			await insertBlock( 'Paragraph' );
 
-		deleteFile( traceFile );
+			// Start tracing.
+			const traceFile = __dirname + '/trace.json';
+			await page.tracing.start( {
+				path: traceFile,
+				screenshots: false,
+				categories: [ 'devtools.timeline' ],
+			} );
 
-		expect( true ).toBe( true );
+			// 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 i = 0; i < keyDownEvents.length; i++ ) {
+				results.type.push(
+					keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
+				);
+			}
+
+			// 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 );
+}