Migrate editing-widgets to Playwright (#57483)

* Migrate editing-widgets to Playwright

* Fix tests

* Code review

* Fix the legacy widget issue in test

.eslintrc.js

@@ -61,10 +61,6 @@ const restrictedImports = [
 		importNames: [ 'combineReducers' ],
 		message: 'Please use `combineReducers` from `@wordpress/data` instead.',
 	},
-	{
-		name: 'puppeteer-testing-library',
-		message: '`puppeteer-testing-library` is still experimental.',
-	},
 	{
 		name: '@emotion/css',
 		message:

packages/e2e-test-utils-playwright/src/editor/get-blocks.ts

@@ -14,17 +14,21 @@ type Block = {
  *
  * @param this
  * @param options
- * @param options.full Whether to return the full block data or just the name and attributes.
+ * @param options.clientId Limit the results to be only under a partial tree of the specified clientId.
+ * @param options.full     Whether to return the full block data or just the name and attributes.
  *
  * @return  The blocks.
  */
-export async function getBlocks( this: Editor, { full = false } = {} ) {
+export async function getBlocks(
+	this: Editor,
+	{ clientId, full = false }: { clientId?: string; full?: boolean } = {}
+) {
 	await this.page.waitForFunction(
 		() => window?.wp?.blocks && window?.wp?.data
 	);
 
 	return await this.page.evaluate(
-		( [ _full ] ) => {
+		( [ _full, _clientId ] ) => {
 			// Remove other unpredictable properties like clientId from blocks for testing purposes.
 			function recursivelyTransformBlocks( blocks: Block[] ): Block[] {
 				return blocks.map( ( block ) => ( {
@@ -38,7 +42,7 @@ export async function getBlocks( this: Editor, { full = false } = {} ) {
 
 			const blocks = window.wp.data
 				.select( 'core/block-editor' )
-				.getBlocks();
+				.getBlocks( _clientId ) as Block[];
 
 			// The editor might still contain an unmodified empty block even when it's technically "empty".
 			if (
@@ -50,6 +54,6 @@ export async function getBlocks( this: Editor, { full = false } = {} ) {
 
 			return _full ? blocks : recursivelyTransformBlocks( blocks );
 		},
-		[ full ]
+		[ full, clientId ]
 	);
 }

packages/e2e-test-utils-playwright/src/editor/insert-block.ts

@@ -14,33 +14,41 @@ interface BlockRepresentation {
  *
  * @param this
  * @param blockRepresentation Inserted block representation.
+ * @param options
+ * @param options.clientId    Client ID of the parent block to insert into.
  */
 async function insertBlock(
 	this: Editor,
-	blockRepresentation: BlockRepresentation
+	blockRepresentation: BlockRepresentation,
+	{ clientId }: { clientId?: string } = {}
 ) {
 	await this.page.waitForFunction(
 		() => window?.wp?.blocks && window?.wp?.data
 	);
 
-	await this.page.evaluate( ( _blockRepresentation ) => {
-		function recursiveCreateBlock( {
-			name,
-			attributes = {},
-			innerBlocks = [],
-		}: BlockRepresentation ): Object {
-			return window.wp.blocks.createBlock(
+	await this.page.evaluate(
+		( [ _blockRepresentation, _clientId ] ) => {
+			function recursiveCreateBlock( {
 				name,
-				attributes,
-				innerBlocks.map( ( innerBlock ) =>
-					recursiveCreateBlock( innerBlock )
-				)
-			);
-		}
-		const block = recursiveCreateBlock( _blockRepresentation );
+				attributes = {},
+				innerBlocks = [],
+			}: BlockRepresentation ): Object {
+				return window.wp.blocks.createBlock(
+					name,
+					attributes,
+					innerBlocks.map( ( innerBlock ) =>
+						recursiveCreateBlock( innerBlock )
+					)
+				);
+			}
+			const block = recursiveCreateBlock( _blockRepresentation );
 
-		window.wp.data.dispatch( 'core/block-editor' ).insertBlock( block );
-	}, blockRepresentation );
+			window.wp.data
+				.dispatch( 'core/block-editor' )
+				.insertBlock( block, undefined, _clientId );
+		},
+		[ blockRepresentation, clientId ] as const
+	);
 }
 
 export type { BlockRepresentation };

packages/e2e-tests/jest.config.js

@@ -12,7 +12,6 @@ module.exports = {
 		'@wordpress/jest-console',
 		'@wordpress/jest-puppeteer-axe',
 		'expect-puppeteer',
-		'puppeteer-testing-library/extend-expect',
 	],
 	testPathIgnorePatterns: [ '/node_modules/' ],
 	snapshotFormat: {

packages/e2e-tests/package.json

@@ -34,7 +34,6 @@
 		"filenamify": "^4.2.0",
 		"jest-message-util": "^29.6.2",
 		"jest-snapshot": "^29.6.2",
-		"puppeteer-testing-library": "^0.5.0",
 		"uuid": "^9.0.1"
 	},
 	"peerDependencies": {

packages/e2e-tests/specs/editor/various/nux.test.js

@@ -135,7 +135,11 @@ describe( 'New User Experience (NUX)', () => {
 		const postTitle = await canvas().waitForSelector(
 			'h1[aria-label="Add title"'
 		);
-		await expect( postTitle ).toHaveFocus();
+		await expect(
+			postTitle.evaluate(
+				( node ) => node === node.ownerDocument.activeElement
+			)
+		).resolves.toBe( true );
 	} );
 
 	it( 'should show the welcome guide if it is manually opened', async () => {