@wordpress/e2e-tests 6.3.5 → 6.5.0

package/specs/editor/various/links.test.js

@@ -8,6 +8,7 @@ import {
 	createNewPost,
 	pressKeyWithModifier,
 	showBlockToolbar,
+	pressKeyTimes,
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Links', () => {
@@ -119,8 +120,11 @@ describe( 'Links', () => {
 		// Type a URL.
 		await page.keyboard.type( 'https://wordpress.org/gutenberg' );
 
-		// Navigate to and toggle the "Open in new tab" checkbox.
+		// Open settings.
 		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Space' );
+
+		// Navigate to and toggle the "Open in new tab" checkbox.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Space' );
 
@@ -134,7 +138,7 @@ describe( 'Links', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 
 		// Tab back to the Submit and apply the link.
-		await pressKeyWithModifier( 'shift', 'Tab' );
+		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Enter' );
 
 		// The link should have been inserted.
@@ -525,8 +529,11 @@ describe( 'Links', () => {
 		await waitForURLFieldAutoFocus();
 		await page.keyboard.type( 'w.org' );
 
-		// Navigate to and toggle the "Open in new tab" checkbox.
+		// Link settings open
 		await page.keyboard.press( 'Tab' );
+		await page.keyboard.press( 'Space' );
+
+		// Navigate to and toggle the "Open in new tab" checkbox.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Space' );
 
@@ -534,7 +541,7 @@ describe( 'Links', () => {
 		// a changing value of the setting.
 		await page.waitForSelector( ':focus.components-form-toggle__input' );
 
-		// Close dialog. Expect that "Open in new tab" would have been applied
+		// Submit link. Expect that "Open in new tab" would have been applied
 		// immediately.
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Enter' );
@@ -597,8 +604,10 @@ describe( 'Links', () => {
 			// Press Cmd+K to insert a link.
 			await pressKeyWithModifier( 'primary', 'K' );
 
-			// Wait for the URL field to auto-focus.
-			await waitForURLFieldAutoFocus();
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Link Settings")]'
+			);
+			await settingsToggle.click();
 
 			const textInput = await page
 				.waitForXPath(
@@ -625,11 +634,17 @@ describe( 'Links', () => {
 				'//button[contains(@aria-label, "Edit")]'
 			);
 			await editButton.click();
+
 			await waitForURLFieldAutoFocus();
 
-			await pressKeyWithModifier( 'shift', 'Tab' );
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Link Settings")]'
+			);
+			await settingsToggle.click();
 
-			// Tabbing back should land us in the text input.
+			await page.keyboard.press( 'Tab' );
+
+			// Tabbing should land us in the text input.
 			const { isTextInput, textValue } = await page.evaluate( () => {
 				const el = document.activeElement;
 
@@ -686,7 +701,12 @@ describe( 'Links', () => {
 
 			await waitForURLFieldAutoFocus();
 
-			await pressKeyWithModifier( 'shift', 'Tab' );
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Link Settings")]'
+			);
+			await settingsToggle.click();
+
+			await page.keyboard.press( 'Tab' );
 
 			// Tabbing back should land us in the text input.
 			const textInputValue = await page.evaluate(
@@ -716,9 +736,14 @@ describe( 'Links', () => {
 			await editButton.click();
 			await waitForURLFieldAutoFocus();
 
-			await pressKeyWithModifier( 'shift', 'Tab' );
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Link Settings")]'
+			);
+			await settingsToggle.click();
 
-			// Tabbing back should land us in the text input.
+			await page.keyboard.press( 'Tab' );
+
+			// Tabbing should land us in the text input.
 			const textInputValue = await page.evaluate(
 				() => document.activeElement.value
 			);
@@ -762,10 +787,13 @@ describe( 'Links', () => {
 			await editButton.click();
 			await waitForURLFieldAutoFocus();
 
+			const [ settingsToggle ] = await page.$x(
+				'//button[contains(@aria-label, "Link Settings")]'
+			);
+			await settingsToggle.click();
+
 			// Move focus back to RichText for the underlying link.
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Tab' );
-			await page.keyboard.press( 'Tab' );
+			await pressKeyTimes( 'Tab', 5 );
 
 			// Make a selection within the RichText.
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
@@ -773,7 +801,7 @@ describe( 'Links', () => {
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
 
 			// Move back to the text input.
-			await page.keyboard.press( 'Tab' );
+			await pressKeyTimes( 'Tab', 3 );
 
 			// Tabbing back should land us in the text input.
 			const textInputValue = await page.evaluate(
@@ -971,8 +999,14 @@ describe( 'Links', () => {
 			await page.keyboard.press( 'Tab' );
 			await page.keyboard.press( 'Enter' );
 
+			await waitForURLFieldAutoFocus();
+
+			// Link settings open
+			await page.keyboard.press( 'Tab' );
+			await page.keyboard.press( 'Space' );
+
 			// Move to Link Text field.
-			await pressKeyWithModifier( 'shift', 'Tab' );
+			await page.keyboard.press( 'Tab' );
 
 			// Change text to "z"
 			await page.keyboard.type( 'z' );

package/specs/editor/various/multi-block-selection.test.js

@@ -359,8 +359,8 @@ describe( 'Multi-block selection', () => {
 		await page.mouse.up();
 		await page.keyboard.type( 'hi' );
 		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
-		"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
-		<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
+		"<!-- wp:group {"layout":{"type":"constrained"}} -->
+		<div class="wp-block-group"><!-- wp:paragraph -->
 		<p>hih text in group</p>
 		<!-- /wp:paragraph --></div>
 		<!-- /wp:group -->"

package/specs/performance/front-end-block-theme.test.js

@@ -12,6 +12,8 @@ import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
 describe( 'Front End Performance', () => {
 	const results = {
 		timeToFirstByte: [],
+		largestContentfulPaint: [],
+		lcpMinusTtfb: [],
 	};
 
 	beforeAll( async () => {
@@ -28,20 +30,54 @@ describe( 'Front End Performance', () => {
 		);
 	} );
 
-	it( 'Time To First Byte (TTFB)', async () => {
-		// We derive the 75th percentile of the TTFB based on these results.
-		// By running it 16 times, the percentile value would be (75/100)*16=12,
-		// meaning that we discard the worst 4 values.
+	it( 'Report TTFB, LCP, and LCP-TTFB', async () => {
+		// Based on https://addyosmani.com/blog/puppeteer-recipes/#performance-observer-lcp
+		function calcLCP() {
+			// By using -1 we know when it didn't record any event.
+			window.largestContentfulPaint = -1;
+
+			const observer = new PerformanceObserver( ( entryList ) => {
+				const entries = entryList.getEntries();
+				const lastEntry = entries[ entries.length - 1 ];
+				// According to the spec, we can use startTime
+				// as it'll report renderTime || loadTime:
+				// https://www.w3.org/TR/largest-contentful-paint/#largestcontentfulpaint
+				window.largestContentfulPaint = lastEntry.startTime;
+			} );
+
+			observer.observe( {
+				type: 'largest-contentful-paint',
+				buffered: true,
+			} );
+
+			document.addEventListener( 'visibilitychange', () => {
+				if ( document.visibilityState === 'hidden' ) {
+					observer.takeRecords();
+					observer.disconnect();
+				}
+			} );
+		}
+
 		let i = 16;
 		while ( i-- ) {
-			await page.goto( createURL( '/' ) );
-			const navigationTimingJson = await page.evaluate( () =>
-				JSON.stringify( performance.getEntriesByType( 'navigation' ) )
-			);
-			const [ navigationTiming ] = JSON.parse( navigationTimingJson );
-			results.timeToFirstByte.push(
-				navigationTiming.responseStart - navigationTiming.startTime
-			);
+			await page.evaluateOnNewDocument( calcLCP );
+			// By waiting for networkidle we make sure navigation won't be considered finished on load,
+			// hence, it'll paint the page and largest-contentful-paint events will be dispatched.
+			// https://pptr.dev/api/puppeteer.page.goto#remarks
+			await page.goto( createURL( '/' ), { waitUntil: 'networkidle0' } );
+
+			const { lcp, ttfb } = await page.evaluate( () => {
+				const [ { responseStart, startTime } ] =
+					performance.getEntriesByType( 'navigation' );
+				return {
+					lcp: window.largestContentfulPaint,
+					ttfb: responseStart - startTime,
+				};
+			} );
+
+			results.largestContentfulPaint.push( lcp );
+			results.timeToFirstByte.push( ttfb );
+			results.lcpMinusTtfb.push( lcp - ttfb );
 		}
 	} );
 } );

package/specs/performance/front-end-classic-theme.test.js

@@ -7,14 +7,17 @@ import { writeFileSync } from 'fs';
 /**
  * WordPress dependencies
  */
-import { createURL, logout } from '@wordpress/e2e-test-utils';
+import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
 
 describe( 'Front End Performance', () => {
 	const results = {
 		timeToFirstByte: [],
+		largestContentfulPaint: [],
+		lcpMinusTtfb: [],
 	};
 
 	beforeAll( async () => {
+		await activateTheme( 'twentytwentyone' );
 		await logout();
 	} );
 
@@ -26,20 +29,54 @@ describe( 'Front End Performance', () => {
 		);
 	} );
 
-	it( 'Time To First Byte (TTFB)', async () => {
-		// We derive the 75th percentile of the TTFB based on these results.
-		// By running it 16 times, the percentile value would be (75/100)*16=12,
-		// meaning that we discard the worst 4 values.
+	it( 'Report TTFB, LCP, and LCP-TTFB', async () => {
+		// Based on https://addyosmani.com/blog/puppeteer-recipes/#performance-observer-lcp
+		function calcLCP() {
+			// By using -1 we know when it didn't record any event.
+			window.largestContentfulPaint = -1;
+
+			const observer = new PerformanceObserver( ( entryList ) => {
+				const entries = entryList.getEntries();
+				const lastEntry = entries[ entries.length - 1 ];
+				// According to the spec, we can use startTime
+				// as it'll report renderTime || loadTime:
+				// https://www.w3.org/TR/largest-contentful-paint/#largestcontentfulpaint
+				window.largestContentfulPaint = lastEntry.startTime;
+			} );
+
+			observer.observe( {
+				type: 'largest-contentful-paint',
+				buffered: true,
+			} );
+
+			document.addEventListener( 'visibilitychange', () => {
+				if ( document.visibilityState === 'hidden' ) {
+					observer.takeRecords();
+					observer.disconnect();
+				}
+			} );
+		}
+
 		let i = 16;
 		while ( i-- ) {
-			await page.goto( createURL( '/' ) );
-			const navigationTimingJson = await page.evaluate( () =>
-				JSON.stringify( performance.getEntriesByType( 'navigation' ) )
-			);
-			const [ navigationTiming ] = JSON.parse( navigationTimingJson );
-			results.timeToFirstByte.push(
-				navigationTiming.responseStart - navigationTiming.startTime
-			);
+			await page.evaluateOnNewDocument( calcLCP );
+			// By waiting for networkidle we make sure navigation won't be considered finished on load,
+			// hence, it'll paint the page and largest-contentful-paint events will be dispatched.
+			// https://pptr.dev/api/puppeteer.page.goto#remarks
+			await page.goto( createURL( '/' ), { waitUntil: 'networkidle0' } );
+
+			const { lcp, ttfb } = await page.evaluate( () => {
+				const [ { responseStart, startTime } ] =
+					performance.getEntriesByType( 'navigation' );
+				return {
+					lcp: window.largestContentfulPaint,
+					ttfb: responseStart - startTime,
+				};
+			} );
+
+			results.largestContentfulPaint.push( lcp );
+			results.timeToFirstByte.push( ttfb );
+			results.lcpMinusTtfb.push( lcp - ttfb );
 		}
 	} );
 } );

package/specs/performance/post-editor.test.js

@@ -29,6 +29,7 @@ import {
 	getHoverEventDurations,
 	getSelectionEventDurations,
 	getLoadingDurations,
+	sum,
 } from './utils';
 
 jest.setTimeout( 1000000 );
@@ -105,28 +106,43 @@ describe( 'Post Editor Performance', () => {
 			readFile( join( __dirname, '../../assets/large-post.html' ) )
 		);
 		await saveDraft();
-		let i = 5;
+		const draftURL = await page.url();
+
+		// Number of sample measurements to take.
+		const samples = 5;
+		// 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;
 		while ( i-- ) {
-			await page.reload();
+			await page.close();
+			page = await browser.newPage();
+
+			await page.goto( draftURL );
 			await page.waitForSelector( '.edit-post-layout', {
 				timeout: 120000,
 			} );
 			await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
-			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 );
+			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 );
+			}
 		}
 	} );
 
@@ -220,22 +236,26 @@ describe( 'Post Editor Performance', () => {
 	it( 'Selecting blocks', async () => {
 		await load1000Paragraphs();
 		const paragraphs = await canvas().$$( '.wp-block' );
-		await page.tracing.start( {
-			path: traceFile,
-			screenshots: false,
-			categories: [ 'devtools.timeline' ],
-		} );
 		await paragraphs[ 0 ].click();
 		for ( let j = 1; j <= 10; j++ ) {
 			// Wait for the browser to be idle before starting the monitoring.
 			// eslint-disable-next-line no-restricted-syntax
 			await page.waitForTimeout( 1000 );
+			await page.tracing.start( {
+				path: traceFile,
+				screenshots: false,
+				categories: [ 'devtools.timeline' ],
+			} );
 			await paragraphs[ j ].click();
+			await page.tracing.stop();
+			traceResults = JSON.parse( readFile( traceFile ) );
+			const allDurations = getSelectionEventDurations( traceResults );
+			results.focus.push(
+				allDurations.reduce( ( acc, eventDurations ) => {
+					return acc + sum( eventDurations );
+				}, 0 )
+			);
 		}
-		await page.tracing.stop();
-		traceResults = JSON.parse( readFile( traceFile ) );
-		const [ focusEvents ] = getSelectionEventDurations( traceResults );
-		results.focus = focusEvents;
 	} );
 
 	it( 'Opening persistent list view', async () => {
@@ -277,9 +297,6 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Searching the inserter', async () => {
-		function sum( arr ) {
-			return arr.reduce( ( a, b ) => a + b, 0 );
-		}
 		await load1000Paragraphs();
 		await openGlobalBlockInserter();
 		for ( let j = 0; j < 10; j++ ) {

package/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,40 +75,72 @@ 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;
+		// 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.reload();
+			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 } );
-			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 );
+
+			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 );
+			}
 		}
+	} );
+
+	it( 'Typing', async () => {
+		await page.waitForSelector( '.edit-site-visual-editor', {
+			timeout: 120000,
+		} );
+		await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
 
 		// Measuring typing performance inside the post content.
 		await canvas().waitForSelector(
@@ -124,7 +151,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,

package/specs/performance/utils.js

@@ -41,6 +41,10 @@ function isFocusEvent( item ) {
 	return isEvent( item ) && item.args.data.type === 'focus';
 }
 
+function isFocusInEvent( item ) {
+	return isEvent( item ) && item.args.data.type === 'focusin';
+}
+
 function isClickEvent( item ) {
 	return isEvent( item ) && item.args.data.type === 'click';
 }
@@ -68,7 +72,10 @@ export function getTypingEventDurations( trace ) {
 }
 
 export function getSelectionEventDurations( trace ) {
-	return [ getEventDurationsForType( trace, isFocusEvent ) ];
+	return [
+		getEventDurationsForType( trace, isFocusEvent ),
+		getEventDurationsForType( trace, isFocusInEvent ),
+	];
 }
 
 export function getClickEventDurations( trace ) {
@@ -113,3 +120,7 @@ export async function getLoadingDurations() {
 		};
 	} );
 }
+
+export function sum( arr ) {
+	return arr.reduce( ( a, b ) => a + b, 0 );
+}