Migrate template part test to playwright (#41048)

* Migrate template part test to playwright

* Apply suggestions from code review

Co-authored-by: Kai Hao <kevin830726@gmail.com>

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

@@ -12,7 +12,7 @@ import { getEditedPostContent } from './get-edited-post-content';
 import { insertBlock } from './insert-block';
 import { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
 import { openPreviewPage } from './preview';
-import { selectBlockByClientId } from './select-block-by-client-id';
+import { selectBlocks } from './select-blocks';
 import { showBlockToolbar } from './show-block-toolbar';
 import { saveSiteEditorEntities } from './site-editor';
 
@@ -59,6 +59,6 @@ export class Editor {
 	openDocumentSettingsSidebar = openDocumentSettingsSidebar;
 	openPreviewPage = openPreviewPage;
 	saveSiteEditorEntities = saveSiteEditorEntities;
-	selectBlockByClientId = selectBlockByClientId;
+	selectBlocks = selectBlocks;
 	showBlockToolbar = showBlockToolbar;
 }

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

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import type { Locator } from '@playwright/test';
+
+/**
+ * Internal dependencies
+ */
+import type { Editor } from './index';
+
+export async function selectBlocks(
+	this: Editor,
+	startSelectorOrLocator: string | Locator,
+	endSelectorOrLocator?: string | Locator
+) {
+	const startBlock =
+		typeof startSelectorOrLocator === 'string'
+			? this.canvas.locator( startSelectorOrLocator )
+			: startSelectorOrLocator;
+
+	const endBlock =
+		typeof endSelectorOrLocator === 'string'
+			? this.canvas.locator( endSelectorOrLocator )
+			: endSelectorOrLocator;
+
+	const startClientId = await startBlock.getAttribute( 'data-block' );
+	const endClientId = await endBlock?.getAttribute( 'data-block' );
+
+	if ( endClientId ) {
+		await this.page.evaluate(
+			( [ startId, endId ] ) => {
+				// @ts-ignore
+				wp.data
+					.dispatch( 'core/block-editor' )
+					.multiSelect( startId, endId );
+			},
+			[ startClientId, endClientId ]
+		);
+	} else {
+		await this.page.evaluate(
+			( [ clientId ] ) => {
+				// @ts-ignore
+				wp.data.dispatch( 'core/block-editor' ).selectBlock( clientId );
+			},
+			[ startClientId ]
+		);
+	}
+}