From d36691b5853a00fd504c7727471cff53d0e493aa Mon Sep 17 00:00:00 2001 From: Bart Kalisz Date: Thu, 16 Feb 2023 18:42:06 +0100 Subject: [PATCH] Fix site editor performance tests --- .../specs/performance/site-editor.test.js | 154 +++++++++--------- 1 file changed, 77 insertions(+), 77 deletions(-) diff --git a/packages/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js index 897126111564c0..e2b8fc1353bf32 100644 --- a/packages/e2e-tests/specs/performance/site-editor.test.js +++ b/packages/e2e-tests/specs/performance/site-editor.test.js @@ -59,6 +59,8 @@ describe( 'Site Editor Performance', () => { ); await createNewPost( { postType: 'page' } ); + await page.keyboard.type( 'Site Editor Performance Tests' ); + await page.evaluate( ( _html ) => { const { parse } = window.wp.blocks; const { dispatch } = window.wp.data; @@ -81,6 +83,12 @@ describe( 'Site Editor Performance', () => { } ); 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' ); @@ -91,96 +99,88 @@ describe( 'Site Editor Performance', () => { postId: id, postType: 'page', } ); - } ); - it( 'Loading', async () => { - const editorURL = await page.url(); + // Wait for the canvas to become actionable. + await canvas().waitForSelector( + '[data-rich-text-placeholder="Write site tagline…"]' + ); + } ); - // Number of sample measurements to take. + describe( 'Loading', () => { 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; + const iterations = Array.from( + { length: samples + throwaway }, + ( _, i ) => i + 1 + ); - let i = throwaway + samples; - - // Measuring loading time. - while ( i-- ) { - await page.close(); - page = await browser.newPage(); + it.each( iterations )( + `iteration %i of ${ iterations.length }`, + async ( i ) => { + if ( i > 1 ) { + 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 ); + } - 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', async () => { + // Measure typing performance inside the post content. + await enterEditMode(); - // 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 ] + // Insert a new paragraph right after the first one. + const targetParagraph = await canvas().waitForXPath( + '//p[contains(text(), "Lorem ipsum dolor sit amet")]' ); - } - - const resultsFilename = basename( __filename, '.js' ) + '.results.json'; + // The second click is needed to get the cursor inside the target + // paragraph. + await targetParagraph.click(); + await targetParagraph.click(); + await insertBlock( 'Paragraph' ); + + // Start tracing. + const traceFile = __dirname + '/trace.json'; + await page.tracing.start( { + path: traceFile, + screenshots: false, + categories: [ 'devtools.timeline' ], + } ); - writeFileSync( - join( __dirname, resultsFilename ), - JSON.stringify( results, null, 2 ) - ); + // 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 ] + ); + } - deleteFile( traceFile ); + // Delete the original trace file. + deleteFile( traceFile ); - expect( true ).toBe( true ); + expect( true ).toBe( true ); + } ); } ); } );