@wordpress/e2e-tests 6.2.0 → 6.3.1

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 6.3.0 (2023-02-01)
+
 ## 6.2.0 (2023-01-11)
 
 ## 6.1.0 (2023-01-02)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "6.2.0",
+	"version": "6.3.1",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^9.2.0",
-		"@wordpress/jest-console": "^6.8.0",
-		"@wordpress/jest-puppeteer-axe": "^5.8.0",
-		"@wordpress/scripts": "^25.2.0",
-		"@wordpress/url": "^3.26.0",
+		"@wordpress/e2e-test-utils": "^9.3.1",
+		"@wordpress/jest-console": "^6.9.1",
+		"@wordpress/jest-puppeteer-axe": "^5.9.1",
+		"@wordpress/scripts": "^25.3.1",
+		"@wordpress/url": "^3.27.1",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "204c880ff65295768e9695dfee6c7a9fee1fdd05"
+	"gitHead": "e9ff92d836928aba65dde94d9d193bc401a934d7"
 }

package/specs/editor/blocks/cover.test.js

@@ -13,6 +13,7 @@ import {
 	insertBlock,
 	createNewPost,
 	openDocumentSettingsSidebar,
+	switchBlockInspectorTab,
 	transformBlockTo,
 } from '@wordpress/e2e-test-utils';
 
@@ -126,7 +127,7 @@ describe( 'Cover', () => {
 			'.components-circular-option-picker__option-wrapper:first-child button'
 		);
 
-		// Select the cover block.By default the child paragraph gets selected.
+		// Select the cover block. By default the child paragraph gets selected.
 		await page.click(
 			'.edit-post-header-toolbar__document-overview-toggle'
 		);
@@ -134,16 +135,15 @@ describe( 'Cover', () => {
 			'.block-editor-list-view-block__contents-container a'
 		);
 
-		const heightInput = (
-			await page.$x(
-				'//div[./label[contains(text(),"Minimum height of cover")]]/following-sibling::div//input'
-			)
-		 )[ 0 ];
+		switchBlockInspectorTab( 'Styles' );
+		const heightInputHandle = await page.waitForSelector(
+			'input[id*="block-cover-height-input"]'
+		);
 
 		// Verify the height of the cover is not defined.
 		expect(
-			await page.evaluate( ( { value } ) => value, heightInput )
-		).toBeFalsy();
+			await page.evaluate( ( { value } ) => value, heightInputHandle )
+		).toBe( '' );
 
 		const resizeButton = await page.$(
 			'.components-resizable-box__handle-bottom'
@@ -188,7 +188,7 @@ describe( 'Cover', () => {
 		expect(
 			await page.evaluate(
 				( { value } ) => Number.parseInt( value ),
-				heightInput
+				heightInputHandle
 			)
 		).toBeGreaterThan( 100 );
 	} );

package/specs/editor/blocks/query.test.js

@@ -31,7 +31,7 @@ describe( 'Query block', () => {
 		await trashAllPosts( 'page' );
 	} );
 	describe( 'Query block insertion', () => {
-		it( 'Carousel', async () => {
+		it( 'List', async () => {
 			await insertBlock( 'Query' );
 			// Wait for the choose pattern button
 			const choosePatternButton = await page.waitForSelector(
@@ -40,64 +40,20 @@ describe( 'Query block', () => {
 			await choosePatternButton.click();
 			// Wait for pattern blocks to be loaded.
 			await page.waitForSelector(
-				'.block-editor-block-pattern-setup__container iframe[title="Editor canvas"]'
+				'.block-library-query-pattern__selection-content iframe[title="Editor canvas"]'
 			);
-			/**
-			 * Ensure that carousel is working by checking slider css classes
-			 * and navigating to the next pattern.
-			 */
-			await page.waitForSelector(
-				'li.pattern-slide.active-slide[aria-label="Query Test 1"]'
-			);
-			const nextPatternButton = await page.waitForSelector(
-				'.block-editor-block-pattern-setup__navigation button[aria-label="Next pattern"]'
-			);
-			await nextPatternButton.click();
-			await page.waitForSelector(
-				'li.pattern-slide.active-slide[aria-label="Query Test 2"]'
+			// Choose the standard pattern.
+			const chosenPattern = await page.waitForSelector(
+				'.block-editor-block-patterns-list__item[aria-label="Standard"]'
 			);
-			// Choose the selected pattern.
-			const chooseButton = await page.waitForXPath(
-				'//div[contains(@class, "block-editor-block-pattern-setup__actions")]//button[text()="Choose"]'
-			);
-			chooseButton.click();
+			chosenPattern.click();
 			// Wait for pattern setup to go away.
-			await page.waitForSelector( '.block-editor-block-pattern-setup', {
-				hidden: true,
-			} );
-			/**
-			 * We can't use `getEditedPostContent` easily for now because
-			 * `query` makes used of `instanceId` so it's not very reliable.
-			 * This should be revisited.
-			 */
-			await page.waitForSelector( '.wp-block-post-date' );
-			await page.waitForSelector( '.wp-block-post-title' );
-		} );
-		it( 'Grid view', async () => {
-			await insertBlock( 'Query' );
-			// Wait for the choose pattern button
-			const choosePatternButton = await page.waitForSelector(
-				'div[data-type="core/query"] button.is-primary'
-			);
-			await choosePatternButton.click();
-			// Wait for patterns setup to be loaded.
 			await page.waitForSelector(
-				'.block-editor-block-pattern-setup__display-controls'
+				'.block-library-query-pattern__selection-content',
+				{
+					hidden: true,
+				}
 			);
-			// Click the Grid view button.
-			const gridViewButton = await page.waitForSelector(
-				'.block-editor-block-pattern-setup__display-controls button[aria-label="Grid view"]'
-			);
-			await gridViewButton.click();
-			// Wait for patterns to be loaded and click the wanted pattern.
-			const gridPattern = await page.waitForSelector(
-				'.block-editor-block-pattern-setup-list__list-item[aria-label="Query Test 2"]'
-			);
-			await gridPattern.click();
-			// Wait for pattern setup to go away.
-			await page.waitForSelector( '.block-editor-block-pattern-setup', {
-				hidden: true,
-			} );
 			/**
 			 * We can't use `getEditedPostContent` easily for now because
 			 * `query` makes used of `instanceId` so it's not very reliable.

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

@@ -68,6 +68,6 @@ exports[`Links should contain a label when it should open in a new tab 1`] = `
 
 exports[`Links should contain a label when it should open in a new tab 2`] = `
 "<!-- wp:paragraph -->
-<p>This is <a href=\\"http://wordpress.org\\">WordPress</a></p>
+<p>This is <a href=\\"http://wordpress.org\\" target=\\"_blank\\" rel=\\"noreferrer noopener\\">WordPress</a></p>
 <!-- /wp:paragraph -->"
 `;

package/specs/editor/various/block-editor-keyboard-shortcuts.test.js

@@ -50,9 +50,10 @@ describe( 'block editor keyboard shortcuts', () => {
 			it( 'should move the blocks up', async () => {
 				await createTestParagraphBlocks();
 				expect( await getEditedPostContent() ).toMatchSnapshot();
-				await page.keyboard.down( 'Shift' );
-				await page.keyboard.press( 'ArrowUp' );
-				await page.keyboard.up( 'Shift' );
+				await pressKeyWithModifier( 'shift', 'ArrowUp' );
+				await page.waitForSelector(
+					'[aria-label="Multiple selected blocks"]'
+				);
 				await moveUp();
 				expect( await getEditedPostContent() ).toMatchSnapshot();
 			} );
@@ -61,9 +62,10 @@ describe( 'block editor keyboard shortcuts', () => {
 				await createTestParagraphBlocks();
 				expect( await getEditedPostContent() ).toMatchSnapshot();
 				await page.keyboard.press( 'ArrowUp' );
-				await page.keyboard.down( 'Shift' );
-				await page.keyboard.press( 'ArrowUp' );
-				await page.keyboard.up( 'Shift' );
+				await pressKeyWithModifier( 'shift', 'ArrowUp' );
+				await page.waitForSelector(
+					'[aria-label="Multiple selected blocks"]'
+				);
 				await moveDown();
 				expect( await getEditedPostContent() ).toMatchSnapshot();
 			} );

package/specs/editor/various/inserting-blocks.test.js

@@ -347,8 +347,10 @@ describe( 'Inserting blocks', () => {
 
 	it( 'shows block preview when hovering over block in inserter', async () => {
 		await openGlobalBlockInserter();
-		await page.waitForSelector( '.editor-block-list-item-paragraph' );
-		await page.focus( '.editor-block-list-item-paragraph' );
+		const paragraphButton = (
+			await page.$x( `//button//span[contains(text(), 'Paragraph')]` )
+		 )[ 0 ];
+		await paragraphButton.hover();
 		const preview = await page.waitForSelector(
 			'.block-editor-inserter__preview',
 			{

package/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -56,7 +56,7 @@ const tabThroughBlockToolbar = async () => {
 	await expect( await getActiveLabel() ).toBe( 'Move down' );
 
 	await page.keyboard.press( 'ArrowRight' );
-	await expect( await getActiveLabel() ).toBe( 'Align' );
+	await expect( await getActiveLabel() ).toBe( 'Align text' );
 
 	await page.keyboard.press( 'ArrowRight' );
 	await expect( await getActiveLabel() ).toBe( 'Bold' );

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

@@ -121,7 +121,6 @@ describe( 'Links', () => {
 
 		// Navigate to and toggle the "Open in new tab" checkbox.
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Space' );
 
 		// Toggle should still have focus and be checked.
@@ -134,7 +133,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.
@@ -527,7 +526,6 @@ describe( 'Links', () => {
 
 		// Navigate to and toggle the "Open in new tab" checkbox.
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Space' );
 
 		// Confirm that focus was not prematurely returned to the paragraph on
@@ -536,7 +534,8 @@ describe( 'Links', () => {
 
 		// Close dialog. Expect that "Open in new tab" would have been applied
 		// immediately.
-		await page.keyboard.press( 'Tab' );
+
+		await pressKeyWithModifier( 'shift', 'Tab' );
 		await page.keyboard.press( 'Enter' );
 
 		// Wait for Gutenberg to finish the job.
@@ -766,6 +765,7 @@ describe( 'Links', () => {
 			await page.keyboard.press( 'Tab' );
 			await page.keyboard.press( 'Tab' );
 			await page.keyboard.press( 'Tab' );
+			await page.keyboard.press( 'Tab' );
 
 			// Make a selection within the RichText.
 			await pressKeyWithModifier( 'shift', 'ArrowRight' );
@@ -940,5 +940,62 @@ describe( 'Links', () => {
 				)
 			).toBeNull();
 		} );
+
+		// Based on issue reported in https://github.com/WordPress/gutenberg/issues/41771/.
+		it( 'should correctly replace targetted links text within rich text value when multiple matching values exist', async () => {
+			// Create a block with some text.
+			await clickBlockAppender();
+
+			// Note the two instances of the string "a".
+			await page.keyboard.type( `a b c a` );
+
+			// Select the last "a" only.
+			await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+
+			// Click on the Link button.
+			await page.click( 'button[aria-label="Link"]' );
+
+			// Wait for the URL field to auto-focus.
+			await waitForURLFieldAutoFocus();
+
+			// Type a URL.
+			await page.keyboard.type( 'www.wordpress.org' );
+
+			// Update the link.
+			await page.keyboard.press( 'Enter' );
+
+			await page.keyboard.press( 'ArrowLeft' );
+
+			// Move to "Edit" button in Link UI
+			await page.keyboard.press( 'Tab' );
+			await page.keyboard.press( 'Tab' );
+			await page.keyboard.press( 'Enter' );
+
+			// Move to Link Text field.
+			await pressKeyWithModifier( 'shift', 'Tab' );
+
+			// Change text to "z"
+			await page.keyboard.type( 'z' );
+
+			await page.keyboard.press( 'Enter' );
+
+			const richTextText = await page.evaluate(
+				() =>
+					document.querySelector(
+						'.block-editor-rich-text__editable'
+					).textContent
+			);
+			// Check that the correct (i.e. last) instance of "a" was replaced with "z".
+			expect( richTextText ).toBe( 'a b c z' );
+
+			const richTextLink = await page.evaluate(
+				() =>
+					document.querySelector(
+						'.block-editor-rich-text__editable a'
+					).textContent
+			);
+			// Check that the correct (i.e. last) instance of "a" was replaced with "z".
+			expect( richTextLink ).toBe( 'z' );
+		} );
 	} );
 } );

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

@@ -395,7 +395,7 @@ describe( 'Multi-block selection', () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '/group' );
 		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Group')]`
+			'//button[@aria-selected="true"][text()="Group"]'
 		);
 		await page.keyboard.press( 'Enter' );
 
@@ -624,7 +624,7 @@ describe( 'Multi-block selection', () => {
 		await page.keyboard.type( '2' );
 		await pressKeyWithModifier( 'primary', 'a' );
 		await pressKeyWithModifier( 'primary', 'a' );
-		await clickBlockToolbarButton( 'Align' );
+		await clickBlockToolbarButton( 'Align text' );
 		await clickButton( 'Align text center' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -658,6 +658,9 @@ describe( 'Multi-block selection', () => {
 	it( 'should gradually multi-select', async () => {
 		await clickBlockAppender();
 		await page.keyboard.type( '/columns' );
+		await page.waitForXPath(
+			'//button[@aria-selected="true"][text()="Columns"]'
+		);
 		await page.keyboard.press( 'Enter' );
 		// Select two columns.
 		await page.keyboard.press( 'ArrowRight' );
@@ -665,9 +668,13 @@ describe( 'Multi-block selection', () => {
 		// Navigate to appender.
 		await page.keyboard.press( 'ArrowRight' );
 		await page.keyboard.press( 'Enter' );
-		// Select a paragraph.
+		// Wait for inserter results to appear and then select a paragraph.
+		await page.waitForSelector(
+			'.block-editor-inserter__quick-inserter-results .block-editor-block-types-list__item'
+		);
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Enter' );
+		// Type two paragraphs
 		await page.keyboard.type( '1' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '2' );
@@ -705,6 +712,9 @@ describe( 'Multi-block selection', () => {
 		await page.keyboard.press( 'Enter' );
 		// Add a list.
 		await page.keyboard.type( '/list' );
+		await page.waitForXPath(
+			'//button[@aria-selected="true"][text()="List"]'
+		);
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '1' );
 
@@ -924,6 +934,9 @@ describe( 'Multi-block selection', () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '/hr' );
+		await page.waitForXPath(
+			'//button[@aria-selected="true"][text()="Separator"]'
+		);
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.press( 'ArrowUp' );
 		await page.keyboard.press( 'ArrowUp' );

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

@@ -105,7 +105,7 @@ describe( 'New User Experience (NUX)', () => {
 		expect( welcomeGuide ).not.toBeNull();
 
 		// Close the guide
-		await page.click( 'button[aria-label="Close dialog"]' );
+		await page.click( '[role="dialog"] button[aria-label="Close"]' );
 
 		// Reload the editor.
 		await page.reload();
@@ -125,7 +125,7 @@ describe( 'New User Experience (NUX)', () => {
 		expect( welcomeGuide ).not.toBeNull();
 
 		// Close the guide.
-		await page.click( 'button[aria-label="Close dialog"]' );
+		await page.click( '[role="dialog"] button[aria-label="Close"]' );
 
 		// Focus should be in post title field.
 		const postTitle = await page.waitForSelector(

package/specs/editor/various/rich-text.test.js

@@ -408,6 +408,10 @@ describe( 'RichText', () => {
 		await button.evaluate( ( element ) => element.scrollIntoView() );
 		await button.click();
 
+		// Wait for the popover with "Text" tab to appear.
+		await page.waitForXPath(
+			'//button[@role="tab"][@aria-selected="true"][text()="Text"]'
+		);
 		// Tab to the "Text" tab.
 		await page.keyboard.press( 'Tab' );
 		// Tab to black.
@@ -511,11 +515,15 @@ describe( 'RichText', () => {
 		// text in the DOM directly, setting selection in the right place, and
 		// firing `compositionend`.
 		// See https://github.com/puppeteer/puppeteer/issues/4981.
-		await page.evaluate( () => {
+		await page.evaluate( async () => {
 			document.activeElement.textContent = '`a`';
 			const selection = window.getSelection();
+			// The `selectionchange` and `compositionend` events should run in separate event
+			// loop ticks to process all data store updates in time. Native events would be
+			// scheduled the same way.
 			selection.selectAllChildren( document.activeElement );
 			selection.collapseToEnd();
+			await new Promise( ( r ) => setTimeout( r, 0 ) );
 			document.activeElement.dispatchEvent(
 				new CompositionEvent( 'compositionend' )
 			);

package/specs/experiments/blocks/post-comments-form.test.js

@@ -12,15 +12,23 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Post Comments Form', () => {
+	let previousCommentStatus;
+
 	beforeAll( async () => {
 		await activateTheme( 'emptytheme' );
 		await deleteAllTemplates( 'wp_template' );
+		previousCommentStatus = await setOption(
+			'default_comment_status',
+			'closed'
+		);
+	} );
+
+	afterAll( async () => {
+		await setOption( 'default_comment_status', previousCommentStatus );
 	} );
 
 	describe( 'placeholder', () => {
 		it( 'displays in site editor even when comments are closed by default', async () => {
-			await setOption( 'default_comment_status', 'closed' );
-
 			// Navigate to "Singular" post template
 			await visitSiteEditor();
 			await expect( page ).toClick(

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

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import { basename, join } from 'path';
+import { writeFileSync } from 'fs';
+
+/**
+ * WordPress dependencies
+ */
+import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
+
+describe( 'Front End Performance', () => {
+	const results = {
+		timeToFirstByte: [],
+	};
+
+	beforeAll( async () => {
+		await activateTheme( 'twentytwentythree' );
+		await logout();
+	} );
+
+	afterAll( async () => {
+		await activateTheme( 'twentytwentyone' );
+		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
+		writeFileSync(
+			join( __dirname, resultsFilename ),
+			JSON.stringify( results, null, 2 )
+		);
+	} );
+
+	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.
+		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
+			);
+		}
+	} );
+} );

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

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { basename, join } from 'path';
+import { writeFileSync } from 'fs';
+
+/**
+ * WordPress dependencies
+ */
+import { createURL, logout } from '@wordpress/e2e-test-utils';
+
+describe( 'Front End Performance', () => {
+	const results = {
+		timeToFirstByte: [],
+	};
+
+	beforeAll( async () => {
+		await logout();
+	} );
+
+	afterAll( async () => {
+		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
+		writeFileSync(
+			join( __dirname, resultsFilename ),
+			JSON.stringify( results, null, 2 )
+		);
+	} );
+
+	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.
+		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
+			);
+		}
+	} );
+} );

package/specs/site-editor/multi-entity-saving.test.js

@@ -314,7 +314,12 @@ describe( 'Multi-entity save flow', () => {
 			// Open the block settings.
 			await page.click( 'button[aria-label="Settings"]' );
 
-			// Change the font size
+			// Wait for the font size picker controls.
+			await page.waitForSelector(
+				'.components-font-size-picker__controls'
+			);
+
+			// Change the font size.
 			await page.click(
 				'.components-font-size-picker__controls button[aria-label="Small"]'
 			);
@@ -322,7 +327,7 @@ describe( 'Multi-entity save flow', () => {
 			// Save all changes.
 			await saveAllChanges();
 
-			// Change the font size
+			// Change the font size.
 			await page.click(
 				'.components-font-size-picker__controls button[aria-label="Medium"]'
 			);

package/specs/editor/blocks/__snapshots__/classic.test.js.snap

@@ -1,5 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Classic Should not fail after save/reload 1`] = `"test"`;
-
-exports[`Classic should be inserted 1`] = `"test"`;