E2E Utils: Use frameLocator for retrieving editor canvas (#54911)

Author: WunderBart

packages/e2e-test-utils-playwright/src/admin/create-new-post.js

@@ -30,26 +30,18 @@ export async function createNewPost( {
 
 	await this.visitAdminPage( 'post-new.php', query );
 
-	// Wait for both iframed and non-iframed canvas and resolve once the
-	// currently available one is ready. To make this work, we need an inner
-	// legacy canvas selector that is unavailable directly when the canvas is
-	// iframed.
-	await Promise.any( [
-		this.page.locator( '.wp-block-post-content' ).waitFor(),
-		this.page
-			.frameLocator( '[name=editor-canvas]' )
-			.locator( 'body > *' )
-			.first()
-			.waitFor(),
-	] );
-
-	await this.page.evaluate( ( welcomeGuide ) => {
+	await this.page.waitForFunction( ( welcomeGuide ) => {
+		if ( ! window?.wp?.data?.dispatch ) {
+			return false;
+		}
 		window.wp.data
 			.dispatch( 'core/preferences' )
 			.set( 'core/edit-post', 'welcomeGuide', welcomeGuide );
 
 		window.wp.data
 			.dispatch( 'core/preferences' )
 			.set( 'core/edit-post', 'fullscreenMode', false );
+
+		return true;
 	}, showWelcomeGuide );
 }

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

@@ -19,6 +19,10 @@ type Block = {
  * @return  The blocks.
  */
 export async function getBlocks( this: Editor, { full = false } = {} ) {
+	await this.page.waitForFunction(
+		() => window?.wp?.blocks && window?.wp?.data
+	);
+
 	return await this.page.evaluate(
 		( [ _full ] ) => {
 			// Remove other unpredictable properties like clientId from blocks for testing purposes.

packages/e2e-test-utils-playwright/src/editor/get-edited-post-content.ts

@@ -11,6 +11,8 @@ import type { Editor } from './index';
  * @return Promise resolving with post content markup.
  */
 export async function getEditedPostContent( this: Editor ) {
+	await this.page.waitForFunction( () => window?.wp?.data );
+
 	return await this.page.evaluate( () =>
 		window.wp.data.select( 'core/editor' ).getEditedPostContent()
 	);

packages/e2e-test-utils-playwright/src/editor/index.ts

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import type { Browser, Page, BrowserContext, Frame } from '@playwright/test';
+import type {
+	Browser,
+	Page,
+	BrowserContext,
+	FrameLocator,
+} from '@playwright/test';
 
 /**
  * Internal dependencies
@@ -19,6 +24,7 @@ import { setContent } from './set-content';
 import { showBlockToolbar } from './show-block-toolbar';
 import { saveSiteEditorEntities } from './site-editor';
 import { setIsFixedToolbar } from './set-is-fixed-toolbar';
+import { switchToLegacyCanvas } from './switch-to-legacy-canvas';
 import { transformBlockTo } from './transform-block-to';
 
 type EditorConstructorProps = {
@@ -36,8 +42,8 @@ export class Editor {
 		this.browser = this.context.browser()!;
 	}
 
-	get canvas(): Frame | Page {
-		return this.page.frame( 'editor-canvas' ) || this.page;
+	get canvas(): FrameLocator {
+		return this.page.frameLocator( '[name="editor-canvas"]' );
 	}
 
 	/** @borrows clickBlockOptionsMenuItem as this.clickBlockOptionsMenuItem */
@@ -72,6 +78,9 @@ export class Editor {
 	/** @borrows setIsFixedToolbar as this.setIsFixedToolbar */
 	setIsFixedToolbar: typeof setIsFixedToolbar =
 		setIsFixedToolbar.bind( this );
+	/** @borrows switchToLegacyCanvas as this.switchToLegacyCanvas */
+	switchToLegacyCanvas: typeof switchToLegacyCanvas =
+		switchToLegacyCanvas.bind( this );
 	/** @borrows transformBlockTo as this.transformBlockTo */
 	transformBlockTo: typeof transformBlockTo = transformBlockTo.bind( this );
 }

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

@@ -19,6 +19,10 @@ async function insertBlock(
 	this: Editor,
 	blockRepresentation: BlockRepresentation
 ) {
+	await this.page.waitForFunction(
+		() => window?.wp?.blocks && window?.wp?.data
+	);
+
 	await this.page.evaluate( ( _blockRepresentation ) => {
 		function recursiveCreateBlock( {
 			name,

packages/e2e-test-utils-playwright/src/editor/set-content.ts

@@ -10,6 +10,10 @@ import type { Editor } from './index';
  * @param html Serialized block HTML.
  */
 async function setContent( this: Editor, html: string ) {
+	await this.page.waitForFunction(
+		() => window?.wp?.blocks && window?.wp?.data
+	);
+
 	await this.page.evaluate( ( _html ) => {
 		const blocks = window.wp.blocks.parse( _html );
 

packages/e2e-test-utils-playwright/src/editor/set-is-fixed-toolbar.ts

@@ -10,6 +10,8 @@ import type { Editor } from './index';
  * @param isFixed Boolean value true/false for on/off.
  */
 export async function setIsFixedToolbar( this: Editor, isFixed: boolean ) {
+	await this.page.waitForFunction( () => window?.wp?.data );
+
 	await this.page.evaluate( ( _isFixed ) => {
 		window.wp.data
 			.dispatch( 'core/preferences' )

packages/e2e-test-utils-playwright/src/editor/switch-to-legacy-canvas.ts

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+/**
+ * Switches to legacy (non-iframed) canvas.
+ *
+ * @param this
+ */
+export async function switchToLegacyCanvas( this: Editor ) {
+	await this.page.waitForFunction( () => window?.wp?.blocks );
+
+	await this.page.evaluate( () => {
+		window.wp.blocks.registerBlockType( 'test/v2', {
+			apiVersion: '2',
+			title: 'test',
+		} );
+	} );
+}

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

@@ -10,6 +10,10 @@ import type { Editor } from './index';
  * @param name Block name.
  */
 export async function transformBlockTo( this: Editor, name: string ) {
+	await this.page.waitForFunction(
+		() => window?.wp?.blocks && window?.wp?.data
+	);
+
 	await this.page.evaluate(
 		( [ blockName ] ) => {
 			const clientIds = window.wp.data

packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts

@@ -54,29 +54,6 @@ async function dragFiles(
 		} )
 	);
 
-	const dataTransfer = await this.page.evaluateHandle(
-		async ( _fileObjects ) => {
-			const dt = new DataTransfer();
-			const fileInstances = await Promise.all(
-				_fileObjects.map( async ( fileObject ) => {
-					const blob = await fetch(
-						`data:${ fileObject.mimeType };base64,${ fileObject.base64 }`
-					).then( ( res ) => res.blob() );
-					return new File( [ blob ], fileObject.name, {
-						type: fileObject.mimeType ?? undefined,
-					} );
-				} )
-			);
-
-			fileInstances.forEach( ( file ) => {
-				dt.items.add( file );
-			} );
-
-			return dt;
-		},
-		fileObjects
-	);
-
 	// CDP doesn't actually support dragging files, this is only a _good enough_
 	// dummy data so that it will correctly send the relevant events.
 	const dragData = {
@@ -159,6 +136,29 @@ async function dragFiles(
 				throw new Error( 'Element not found.' );
 			}
 
+			const dataTransfer = await locator.evaluateHandle(
+				async ( _node, _fileObjects ) => {
+					const dt = new DataTransfer();
+					const fileInstances = await Promise.all(
+						_fileObjects.map( async ( fileObject: any ) => {
+							const blob = await fetch(
+								`data:${ fileObject.mimeType };base64,${ fileObject.base64 }`
+							).then( ( res ) => res.blob() );
+							return new File( [ blob ], fileObject.name, {
+								type: fileObject.mimeType ?? undefined,
+							} );
+						} )
+					);
+
+					fileInstances.forEach( ( file ) => {
+						dt.items.add( file );
+					} );
+
+					return dt;
+				},
+				fileObjects
+			);
+
 			await locator.dispatchEvent( 'drop', { dataTransfer } );
 
 			await cdpSession.detach();

test/e2e/specs/editor/blocks/buttons.spec.js

@@ -30,7 +30,9 @@ test.describe( 'Buttons', () => {
 		editor,
 		page,
 	} ) => {
-		await editor.canvas.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '/buttons' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'Content' );

test/e2e/specs/editor/blocks/classic.spec.js

@@ -18,15 +18,10 @@ test.use( {
 } );
 
 test.describe( 'Classic', () => {
-	test.beforeEach( async ( { admin, page } ) => {
+	test.beforeEach( async ( { admin, editor } ) => {
 		await admin.createNewPost();
 		// To do: run with iframe.
-		await page.evaluate( () => {
-			window.wp.blocks.registerBlockType( 'test/v2', {
-				apiVersion: '2',
-				title: 'test',
-			} );
-		} );
+		await editor.switchToLegacyCanvas();
 	} );
 
 	test.afterAll( async ( { requestUtils } ) => {
@@ -134,12 +129,7 @@ test.describe( 'Classic', () => {
 		await page.unroute( '**' );
 
 		// To do: run with iframe.
-		await page.evaluate( () => {
-			window.wp.blocks.registerBlockType( 'test/v2', {
-				apiVersion: '2',
-				title: 'test',
-			} );
-		} );
+		await editor.switchToLegacyCanvas();
 
 		const errors = [];
 		page.on( 'pageerror', ( exception ) => {

test/e2e/specs/editor/blocks/code.spec.js

@@ -12,7 +12,9 @@ test.describe( 'Code', () => {
 		editor,
 		page,
 	} ) => {
-		await editor.canvas.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '```' );
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( '<?php' );

test/e2e/specs/editor/blocks/comments.spec.js

@@ -165,9 +165,9 @@ test.describe( 'Comments', () => {
 		await expect( warning ).toBeVisible();
 		await expect( placeholder ).toBeVisible();
 
-		await editor.canvas.click(
-			'role=button[name="Switch to editable mode"i]'
-		);
+		await editor.canvas
+			.locator( 'role=button[name="Switch to editable mode"i]' )
+			.click();
 
 		const commentTemplate = editor.canvas.locator(
 			'role=document[name="Block: Comment Template"i]'

test/e2e/specs/editor/blocks/gallery.spec.js

@@ -51,7 +51,9 @@ test.describe( 'Gallery', () => {
 			plainText: `[gallery ids="${ uploadedMedia.id }"]`,
 		} );
 
-		await editor.canvas.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await pageUtils.pressKeys( 'primary+v' );
 
 		const img = editor.canvas.locator(
@@ -204,7 +206,9 @@ test.describe( 'Gallery', () => {
 	} ) => {
 		await admin.createNewPost();
 		await editor.insertBlock( { name: 'core/gallery' } );
-		await editor.canvas.click( 'role=button[name="Media Library"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Media Library"i]' )
+			.click();
 
 		const mediaLibrary = page.locator(
 			'role=dialog[name="Create gallery"i]'

test/e2e/specs/editor/blocks/group.spec.js

@@ -29,9 +29,11 @@ test.describe( 'Group', () => {
 		);
 
 		// Select the default, selected Group layout from the variation picker.
-		await editor.canvas.click(
-			'role=button[name="Group: Gather blocks in a container."i]'
-		);
+		await editor.canvas
+			.locator(
+				'role=button[name="Group: Gather blocks in a container."i]'
+			)
+			.click();
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -40,17 +42,21 @@ test.describe( 'Group', () => {
 		editor,
 		page,
 	} ) => {
-		await editor.canvas.click( 'role=button[name="Add default block"i]' );
+		await editor.canvas
+			.locator( 'role=button[name="Add default block"i]' )
+			.click();
 		await page.keyboard.type( '/group' );
 		await expect(
 			page.locator( 'role=option[name="Group"i][selected]' )
 		).toBeVisible();
 		await page.keyboard.press( 'Enter' );
 
 		// Select the default, selected Group layout from the variation picker.
-		await editor.canvas.click(
-			'role=button[name="Group: Gather blocks in a container."i]'
-		);
+		await editor.canvas
+			.locator(
+				'role=button[name="Group: Gather blocks in a container."i]'
+			)
+			.click();
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -60,10 +66,12 @@ test.describe( 'Group', () => {
 		page,
 	} ) => {
 		await editor.insertBlock( { name: 'core/group' } );
-		await editor.canvas.click(
-			'button[aria-label="Group: Gather blocks in a container."]'
-		);
-		await editor.canvas.click( 'role=button[name="Add block"i]' );
+		await editor.canvas
+			.locator(
+				'button[aria-label="Group: Gather blocks in a container."]'
+			)
+			.click();
+		await editor.canvas.locator( 'role=button[name="Add block"i]' ).click();
 		await page.click(
 			'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'
 		);