Migrate cut-copy-paste-whole-blocks to Playwright

packages/e2e-test-utils-playwright/src/page/get-edited-post-content.js

@@ -0,0 +1,11 @@
+/**
+ * Returns a promise which resolves with the edited post content (HTML string).
+ *
+ * @this {import('./').PageUtils}
+ * @return {Promise} Promise resolving with post content markup.
+ */
+export async function getEditedPostContent() {
+	return await this.page.evaluate( () =>
+		window.wp.data.select( 'core/editor' ).getEditedPostContent()
+	);
+}

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

@@ -8,8 +8,14 @@ import type { Browser, Page, BrowserContext } from '@playwright/test';
  */
 import { clickBlockToolbarButton } from './click-block-toolbar-button';
 import { createNewPost } from './create-new-post';
+import { getEditedPostContent } from './get-edited-post-content';
 import { getPageError } from './get-page-error';
+import { insertBlock } from './insert-block';
 import { isCurrentURL } from './is-current-url';
+import {
+	setClipboardData,
+	pressKeyWithModifier,
+} from './press-key-with-modifier';
 import { showBlockToolbar } from './show-block-toolbar';
 import { visitAdminPage } from './visit-admin-page';
 
@@ -26,8 +32,12 @@ class PageUtils {
 
 	clickBlockToolbarButton = clickBlockToolbarButton;
 	createNewPost = createNewPost;
+	getEditedPostContent = getEditedPostContent;
 	getPageError = getPageError;
+	insertBlock = insertBlock;
 	isCurrentURL = isCurrentURL;
+	pressKeyWithModifier = pressKeyWithModifier;
+	setClipboardData = setClipboardData;
 	showBlockToolbar = showBlockToolbar;
 	visitAdminPage = visitAdminPage;
 }

packages/e2e-test-utils-playwright/src/page/insert-block.js

@@ -0,0 +1,33 @@
+/**
+ * @typedef {Object} BlockRepresentation
+ * @property {string}                 name        Block name.
+ * @property {?Object}                attributes  Block attributes.
+ * @property {?BlockRepresentation[]} innerBlocks Nested blocks.
+ */
+
+/**
+ * @this {import('./').PageUtils}
+ * @param {BlockRepresentation} blockRepresentation Inserted block representation.
+ */
+async function insertBlock( blockRepresentation ) {
+	await this.page.evaluate( ( _blockRepresentation ) => {
+		function recursiveCreateBlock( {
+			name,
+			attributes = {},
+			innerBlocks = [],
+		} ) {
+			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 );
+}
+
+export { insertBlock };

packages/e2e-test-utils-playwright/src/page/press-key-with-modifier.ts

@@ -0,0 +1,138 @@
+/**
+ * External dependencies
+ */
+import { capitalize } from 'lodash';
+import type { Page } from '@playwright/test';
+
+/**
+ * WordPress dependencies
+ */
+import { modifiers, SHIFT, ALT, CTRL } from '@wordpress/keycodes';
+import type { WPKeycodeModifier } from '@wordpress/keycodes';
+
+/**
+ * Internal dependencies
+ */
+import type { PageUtils } from './index';
+
+let clipboardDataHolder: {
+	plainText: string;
+	html: string;
+} = {
+	plainText: '',
+	html: '',
+};
+
+/**
+ * Sets the clipboard data that can be pasted with
+ * `pressKeyWithModifier( 'primary', 'v' )`.
+ *
+ * @param  this
+ * @param  clipboardData
+ * @param  clipboardData.plainText
+ * @param  clipboardData.html
+ */
+export function setClipboardData(
+	this: PageUtils,
+	{ plainText = '', html = '' }: typeof clipboardDataHolder
+) {
+	clipboardDataHolder = {
+		plainText,
+		html,
+	};
+}
+
+async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) {
+	clipboardDataHolder = await page.evaluate(
+		( [ _type, _clipboardData ] ) => {
+			const clipboardDataTransfer = new DataTransfer();
+
+			if ( _type === 'paste' ) {
+				clipboardDataTransfer.setData(
+					'text/plain',
+					_clipboardData.plainText
+				);
+				clipboardDataTransfer.setData(
+					'text/html',
+					_clipboardData.html
+				);
+			} else {
+				const selection = window.getSelection()!;
+				const plainText = selection.toString();
+				let html = plainText;
+				if ( selection.rangeCount ) {
+					const range = selection.getRangeAt( 0 );
+					const fragment = range.cloneContents();
+					html = Array.from( fragment.childNodes )
+						.map( ( node ) =>
+							Object.prototype.hasOwnProperty.call(
+								node,
+								'outerHTML'
+							)
+								? ( node as Element ).outerHTML
+								: node.nodeValue
+						)
+						.join( '' );
+				}
+				clipboardDataTransfer.setData( 'text/plain', plainText );
+				clipboardDataTransfer.setData( 'text/html', html );
+			}
+
+			document.activeElement?.dispatchEvent(
+				new ClipboardEvent( _type, {
+					bubbles: true,
+					cancelable: true,
+					clipboardData: clipboardDataTransfer,
+				} )
+			);
+
+			return {
+				plainText: clipboardDataTransfer.getData( 'text/plain' ),
+				html: clipboardDataTransfer.getData( 'text/html' ),
+			};
+		},
+		[ type, clipboardDataHolder ] as const
+	);
+}
+
+/**
+ * Performs a key press with modifier (Shift, Control, Meta, Alt), where each modifier
+ * is normalized to platform-specific modifier.
+ *
+ * @param  this
+ * @param  modifier
+ * @param  key
+ */
+export async function pressKeyWithModifier(
+	this: PageUtils,
+	modifier: WPKeycodeModifier,
+	key: string
+) {
+	if ( modifier.toLowerCase() === 'primary' && key.toLowerCase() === 'c' ) {
+		return await emulateClipboard( this.page, 'copy' );
+	}
+
+	if ( modifier.toLowerCase() === 'primary' && key.toLowerCase() === 'x' ) {
+		return await emulateClipboard( this.page, 'cut' );
+	}
+
+	if ( modifier.toLowerCase() === 'primary' && key.toLowerCase() === 'v' ) {
+		return await emulateClipboard( this.page, 'paste' );
+	}
+
+	const isAppleOS = () => process.platform === 'darwin';
+	const overWrittenModifiers = {
+		...modifiers,
+		shiftAlt: ( _isApple: () => boolean ) =>
+			_isApple() ? [ SHIFT, ALT ] : [ SHIFT, CTRL ],
+	};
+	const mappedModifiers = overWrittenModifiers[ modifier ](
+		isAppleOS
+	).map( ( keycode ) =>
+		keycode === CTRL ? 'Control' : capitalize( keycode )
+	);
+
+	await this.page.keyboard.press(
+		`${ mappedModifiers.join( '+' ) }+${ key }`
+	);
+}

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

@@ -99,6 +99,7 @@ function observeConsoleLogging( message: ConsoleMessage ) {
 const test = base.extend<
 	{
 		pageUtils: PageUtils;
+		snapshotSuffix: void;
 	},
 	{
 		requestUtils: RequestUtils;
@@ -136,6 +137,16 @@ const test = base.extend<
 		},
 		{ scope: 'worker' },
 	],
+	// A work-around automatic fixture to remove the default snapshot suffix.
+	// See https://github.com/microsoft/playwright/issues/11134
+	snapshotSuffix: [
+		async ( {}, use, testInfo ) => {
+			testInfo.snapshotSuffix = '';
+
+			await use();
+		},
+		{ auto: true },
+	],
 } );
 
 export { test, expect };