From d07a36d94a8169bf2cfc1ba91186d8b2731e679e Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 4 Dec 2023 14:17:13 +0200 Subject: [PATCH 1/2] Performance: measure typing without inspector --- .../config/performance-reporter.ts | 7 ++ test/performance/specs/post-editor.spec.js | 116 +++++++++--------- 2 files changed, 66 insertions(+), 57 deletions(-) diff --git a/test/performance/config/performance-reporter.ts b/test/performance/config/performance-reporter.ts index fa7cc90825c220..4a54a1fec2382d 100644 --- a/test/performance/config/performance-reporter.ts +++ b/test/performance/config/performance-reporter.ts @@ -26,6 +26,7 @@ export interface WPRawPerformanceResults { firstContentfulPaint: number[]; firstBlock: number[]; type: number[]; + typeWithoutInspector: number[]; typeContainer: number[]; focus: number[]; inserterOpen: number[]; @@ -48,6 +49,9 @@ export interface WPPerformanceResults { type?: number; minType?: number; maxType?: number; + typeWithoutInspector?: number; + minTypeWithoutInspector?: number; + maxTypeWithoutInspector?: number; typeContainer?: number; minTypeContainer?: number; maxTypeContainer?: number; @@ -92,6 +96,9 @@ export function curateResults( type: average( results.type ), minType: minimum( results.type ), maxType: maximum( results.type ), + typeWithoutInspector: average( results.typeWithoutInspector ), + minTypeWithoutInspector: minimum( results.typeWithoutInspector ), + maxTypeWithoutInspector: maximum( results.typeWithoutInspector ), typeContainer: average( results.typeContainer ), minTypeContainer: minimum( results.typeContainer ), maxTypeContainer: maximum( results.typeContainer ), diff --git a/test/performance/specs/post-editor.spec.js b/test/performance/specs/post-editor.spec.js index d5ff40570afd78..554b0dc71283e6 100644 --- a/test/performance/specs/post-editor.spec.js +++ b/test/performance/specs/post-editor.spec.js @@ -22,6 +22,7 @@ const results = { firstContentfulPaint: [], firstBlock: [], type: [], + typeWithoutInspector: [], typeContainer: [], focus: [], listViewOpen: [], @@ -91,6 +92,40 @@ test.describe( 'Post Editor Performance', () => { } } ); + async function type( target, metrics, key ) { + // The first character typed triggers a longer time (isTyping change). + // It can impact the stability of the metric, so we exclude it. It + // probably deserves a dedicated metric itself, though. + const samples = 10; + const throwaway = 1; + const iterations = samples + throwaway; + + // Start tracing. + await metrics.startTracing(); + + // Type the testing sequence into the empty paragraph. + await target.type( 'x'.repeat( iterations ), { + delay: BROWSER_IDLE_WAIT, + // The extended timeout is needed because the typing is very slow + // and the `delay` value itself does not extend it. + timeout: iterations * BROWSER_IDLE_WAIT * 2, // 2x the total time to be safe. + } ); + + // Stop tracing. + await metrics.stopTracing(); + + // Get the durations. + const [ keyDownEvents, keyPressEvents, keyUpEvents ] = + metrics.getTypingEventDurations(); + + // Save the results. + for ( let i = throwaway; i < iterations; i++ ) { + results[ key ].push( + keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ] + ); + } + } + test.describe( 'Typing', () => { let draftId = null; @@ -110,37 +145,34 @@ test.describe( 'Post Editor Performance', () => { name: /Empty block/i, } ); - // The first character typed triggers a longer time (isTyping change). - // It can impact the stability of the metric, so we exclude it. It - // probably deserves a dedicated metric itself, though. - const samples = 10; - const throwaway = 1; - const iterations = samples + throwaway; + await type( paragraph, metrics, 'type' ); + } ); + } ); - // Start tracing. - await metrics.startTracing(); + test.describe( 'Typing (without inspector)', () => { + let draftId = null; - // Type the testing sequence into the empty paragraph. - await paragraph.type( 'x'.repeat( iterations ), { - delay: BROWSER_IDLE_WAIT, - // The extended timeout is needed because the typing is very slow - // and the `delay` value itself does not extend it. - timeout: iterations * BROWSER_IDLE_WAIT * 2, // 2x the total time to be safe. - } ); + test( 'Setup the test post', async ( { admin, perfUtils, editor } ) => { + await admin.createNewPost(); + await perfUtils.loadBlocksForLargePost(); + await editor.insertBlock( { name: 'core/paragraph' } ); + draftId = await perfUtils.saveDraft(); + } ); - // Stop tracing. - await metrics.stopTracing(); + test( 'Run the test', async ( { admin, perfUtils, metrics, page } ) => { + await admin.editPost( draftId ); + await perfUtils.disableAutosave(); + const toggleButton = page + .getByRole( 'region', { name: 'Editor settings' } ) + .getByRole( 'button', { name: 'Close Settings' } ); + await toggleButton.click(); + const canvas = await perfUtils.getCanvas(); - // Get the durations. - const [ keyDownEvents, keyPressEvents, keyUpEvents ] = - metrics.getTypingEventDurations(); + const paragraph = canvas.getByRole( 'document', { + name: /Empty block/i, + } ); - // Save the results. - for ( let i = throwaway; i < iterations; i++ ) { - results.type.push( - keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ] - ); - } + await type( paragraph, metrics, 'typeWithoutInspector' ); } ); } ); @@ -166,37 +198,7 @@ test.describe( 'Post Editor Performance', () => { .first(); await firstParagraph.click(); - // The first character typed triggers a longer time (isTyping change). - // It can impact the stability of the metric, so we exclude it. It - // probably deserves a dedicated metric itself, though. - const samples = 10; - const throwaway = 1; - const iterations = samples + throwaway; - - // Start tracing. - await metrics.startTracing(); - - // Start typing in the middle of the text. - await firstParagraph.type( 'x'.repeat( iterations ), { - delay: BROWSER_IDLE_WAIT, - // The extended timeout is needed because the typing is very slow - // and the `delay` value itself does not extend it. - timeout: iterations * BROWSER_IDLE_WAIT * 2, // 2x the total time to be safe. - } ); - - // Stop tracing. - await metrics.stopTracing(); - - // Get the durations. - const [ keyDownEvents, keyPressEvents, keyUpEvents ] = - metrics.getTypingEventDurations(); - - // Save the results. - for ( let i = throwaway; i < iterations; i++ ) { - results.typeContainer.push( - keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ] - ); - } + await type( firstParagraph, metrics, 'typeContainer' ); } ); } ); From 8b8eb94202893d36871a9f7038a53f9e6d5d2289 Mon Sep 17 00:00:00 2001 From: Ella Date: Mon, 4 Dec 2023 15:02:43 +0200 Subject: [PATCH 2/2] Remove min/max --- test/performance/config/performance-reporter.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/test/performance/config/performance-reporter.ts b/test/performance/config/performance-reporter.ts index 4a54a1fec2382d..7b1f171230c59e 100644 --- a/test/performance/config/performance-reporter.ts +++ b/test/performance/config/performance-reporter.ts @@ -50,8 +50,6 @@ export interface WPPerformanceResults { minType?: number; maxType?: number; typeWithoutInspector?: number; - minTypeWithoutInspector?: number; - maxTypeWithoutInspector?: number; typeContainer?: number; minTypeContainer?: number; maxTypeContainer?: number; @@ -97,8 +95,6 @@ export function curateResults( minType: minimum( results.type ), maxType: maximum( results.type ), typeWithoutInspector: average( results.typeWithoutInspector ), - minTypeWithoutInspector: minimum( results.typeWithoutInspector ), - maxTypeWithoutInspector: maximum( results.typeWithoutInspector ), typeContainer: average( results.typeContainer ), minTypeContainer: minimum( results.typeContainer ), maxTypeContainer: maximum( results.typeContainer ),