diff --git a/packages/e2e-tests/config/setup-performance-test.js b/packages/e2e-tests/config/setup-performance-test.js index 172699035571e9..384a88b8a3f2d3 100644 --- a/packages/e2e-tests/config/setup-performance-test.js +++ b/packages/e2e-tests/config/setup-performance-test.js @@ -19,9 +19,11 @@ const PUPPETEER_TIMEOUT = process.env.PUPPETEER_TIMEOUT; // The Jest timeout is increased because these tests are a bit slow. jest.setTimeout( PUPPETEER_TIMEOUT || 100000 ); -async function setupBrowser() { - await clearLocalStorage(); +async function setupPage() { await setBrowserViewport( 'large' ); + await page.emulateMediaFeatures( [ + { name: 'prefers-reduced-motion', value: 'reduce' }, + ] ); } // Before every test suite run, delete all content created by the test. This ensures @@ -32,13 +34,18 @@ beforeAll( async () => { await trashAllPosts(); await trashAllPosts( 'wp_block' ); - await setupBrowser(); + await clearLocalStorage(); + await setupPage(); await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' ); - await page.emulateMediaFeatures( [ - { name: 'prefers-reduced-motion', value: 'reduce' }, - ] ); } ); afterEach( async () => { - await setupBrowser(); + // 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. + await page.close(); + page = await browser.newPage(); + // Set up testing config on new page. + await setupPage(); } ); diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js index 10699f921be510..7fbcc6e51989fd 100644 --- a/packages/e2e-tests/specs/performance/post-editor.test.js +++ b/packages/e2e-tests/specs/performance/post-editor.test.js @@ -105,9 +105,14 @@ describe( 'Post Editor Performance', () => { readFile( join( __dirname, '../../assets/large-post.html' ) ) ); await saveDraft(); + const draftURL = await page.url(); + let i = 5; while ( i-- ) { - await page.reload(); + await page.close(); + page = await browser.newPage(); + + await page.goto( draftURL ); await page.waitForSelector( '.edit-post-layout', { timeout: 120000, } ); diff --git a/packages/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js index e3a2ef86c69328..77fece4b4f3a5d 100644 --- a/packages/e2e-tests/specs/performance/site-editor.test.js +++ b/packages/e2e-tests/specs/performance/site-editor.test.js @@ -30,34 +30,29 @@ import { jest.setTimeout( 1000000 ); +const results = { + serverResponse: [], + firstPaint: [], + domContentLoaded: [], + loaded: [], + firstContentfulPaint: [], + firstBlock: [], + type: [], + typeContainer: [], + focus: [], + inserterOpen: [], + inserterHover: [], + inserterSearch: [], + listViewOpen: [], +}; + +let id; + describe( 'Site Editor Performance', () => { beforeAll( async () => { await activateTheme( 'emptytheme' ); await deleteAllTemplates( 'wp_template' ); await deleteAllTemplates( 'wp_template_part' ); - } ); - afterAll( async () => { - await deleteAllTemplates( 'wp_template' ); - await deleteAllTemplates( 'wp_template_part' ); - await activateTheme( 'twentytwentyone' ); - } ); - - it( 'Loading', async () => { - const results = { - serverResponse: [], - firstPaint: [], - domContentLoaded: [], - loaded: [], - firstContentfulPaint: [], - firstBlock: [], - type: [], - typeContainer: [], - focus: [], - inserterOpen: [], - inserterHover: [], - inserterSearch: [], - listViewOpen: [], - }; const html = readFile( join( __dirname, '../../assets/large-post.html' ) @@ -80,17 +75,32 @@ describe( 'Site Editor Performance', () => { }, html ); await saveDraft(); - const id = await page.evaluate( () => + id = await page.evaluate( () => new URL( document.location ).searchParams.get( 'post' ) ); + } ); + afterAll( async () => { + 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(); let i = 3; // Measuring loading time. while ( i-- ) { - await page.reload(); + await page.close(); + page = await browser.newPage(); + + await page.goto( editorURL ); await page.waitForSelector( '.edit-site-visual-editor', { timeout: 120000, } ); @@ -111,7 +121,9 @@ describe( 'Site Editor Performance', () => { results.firstContentfulPaint.push( firstContentfulPaint ); results.firstBlock.push( firstBlock ); } + } ); + it( 'Typing', async () => { // Measuring typing performance inside the post content. await canvas().waitForSelector( '[data-type="core/post-content"] [data-type="core/paragraph"]' @@ -121,7 +133,7 @@ describe( 'Site Editor Performance', () => { '[data-type="core/post-content"] [data-type="core/paragraph"]' ); await insertBlock( 'Paragraph' ); - i = 200; + let i = 200; const traceFile = __dirname + '/trace.json'; await page.tracing.start( { path: traceFile,