@wordpress/e2e-test-utils-playwright 1.48.0 → 1.48.1

package/src/page-utils/drag-files.ts

@@ -1,173 +0,0 @@
-/**
- * External dependencies
- */
-import { readFile } from 'fs/promises';
-import { basename } from 'path';
-import { getType } from 'mime';
-
-/**
- * Internal dependencies
- */
-import type { PageUtils } from './index';
-import type { Locator } from '@playwright/test';
-
-type FileObject = {
-	name: string;
-	mimeType?: string;
-	buffer: Buffer;
-};
-
-type Options = {
-	position?: { x: number; y: number };
-};
-
-/**
- * Simulate dragging files from outside the current page.
- *
- * @param this
- * @param files The files to be dragged.
- * @return The methods of the drag operation.
- */
-async function dragFiles(
-	this: PageUtils,
-	files: string | string[] | FileObject | FileObject[]
-) {
-	const filesList = Array.isArray( files ) ? files : [ files ];
-	const fileObjects = await Promise.all(
-		filesList.map( async ( filePathOrObject ) => {
-			if ( typeof filePathOrObject !== 'string' ) {
-				return {
-					name: filePathOrObject.name,
-					mimeType:
-						filePathOrObject.mimeType ||
-						getType( filePathOrObject.name ),
-					base64: filePathOrObject.buffer.toString( 'base64' ),
-				};
-			}
-			const base64 = await readFile( filePathOrObject, 'base64' );
-			const name = basename( filePathOrObject );
-			return {
-				name,
-				mimeType: getType( filePathOrObject ),
-				base64,
-			};
-		} )
-	);
-
-	// 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 = {
-		items: fileObjects.map( ( fileObject ) => ( {
-			mimeType: fileObject.mimeType ?? 'File',
-			data: fileObject.base64,
-		} ) ),
-		files: fileObjects.map( ( fileObject ) => fileObject.name ),
-		// Copy = 1, Link = 2, Move = 16.
-		dragOperationsMask: 1,
-	};
-
-	const cdpSession = await this.context.newCDPSession( this.page );
-
-	const position = {
-		x: 0,
-		y: 0,
-	};
-
-	return {
-		/**
-		 * Drag the files over an element (fires `dragenter` and `dragover` events).
-		 *
-		 * @param selectorOrLocator A selector or a locator to search for an element.
-		 * @param options           The optional options.
-		 * @param options.position  A point to use relative to the top-left corner of element padding box. If not specified, uses some visible point of the element.
-		 */
-		dragOver: async (
-			selectorOrLocator: string | Locator,
-			options: Options = {}
-		) => {
-			const locator =
-				typeof selectorOrLocator === 'string'
-					? this.page.locator( selectorOrLocator )
-					: selectorOrLocator;
-			const boundingBox = await locator.boundingBox();
-
-			if ( ! boundingBox ) {
-				throw new Error(
-					'Cannot find the element or the element is not visible on the viewport.'
-				);
-			}
-
-			position.x =
-				boundingBox.x +
-				( options.position?.x ?? boundingBox.width / 2 );
-			position.y =
-				boundingBox.y +
-				( options.position?.y ?? boundingBox.height / 2 );
-
-			await cdpSession.send( 'Input.dispatchDragEvent', {
-				type: 'dragEnter',
-				...position,
-				data: dragData,
-			} );
-			await cdpSession.send( 'Input.dispatchDragEvent', {
-				type: 'dragOver',
-				...position,
-				data: dragData,
-			} );
-		},
-
-		/**
-		 * Drop the files at the current position.
-		 */
-		drop: async () => {
-			const topMostElement = await this.page.evaluateHandle(
-				( { x, y } ) => {
-					const element = document.elementFromPoint( x, y );
-					if ( element instanceof HTMLIFrameElement ) {
-						const offsetBox = element.getBoundingClientRect();
-						return element.contentDocument!.elementFromPoint(
-							x - offsetBox.x,
-							y - offsetBox.y
-						);
-					}
-					return element;
-				},
-				position
-			);
-			const elementHandle = topMostElement.asElement();
-
-			if ( ! elementHandle ) {
-				throw new Error( 'Element not found.' );
-			}
-
-			const dataTransfer = await elementHandle.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 elementHandle.dispatchEvent( 'drop', { dataTransfer } );
-
-			await cdpSession.detach();
-		},
-	};
-}
-
-export { dragFiles };

package/src/page-utils/emulate-network-conditions.ts

@@ -1,101 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { PageUtils } from './';
-
-interface NetworkConditions {
-	/**
-	 * True to emulate internet disconnection.
-	 */
-	offline: boolean;
-	/**
-	 * Minimum latency from request sent to response headers received (ms).
-	 */
-	latency: number;
-	/**
-	 * Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.
-	 */
-	downloadThroughput: number;
-	/**
-	 * Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.
-	 */
-	uploadThroughput: number;
-}
-
-// Defaults from https://github.com/puppeteer/puppeteer/blob/401355610874beac23a51dcb75739a4bb4191a2b/packages/puppeteer-core/src/cdp/PredefinedNetworkConditions.ts.
-const PredefinedNetworkConditions: Record< string, NetworkConditions > = {
-	// Generally aligned with DevTools
-	// https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/core/sdk/NetworkManager.ts;l=398;drc=225e1240f522ca684473f541ae6dae6cd766dd33.
-	'Slow 3G': {
-		offline: false,
-		// ~500Kbps down
-		downloadThroughput: ( ( 500 * 1000 ) / 8 ) * 0.8,
-		// ~500Kbps up
-		uploadThroughput: ( ( 500 * 1000 ) / 8 ) * 0.8,
-		// 400ms RTT
-		latency: 400 * 5,
-	},
-	'Fast 3G': {
-		offline: false,
-		// ~1.6 Mbps down
-		downloadThroughput: ( ( 1.6 * 1000 * 1000 ) / 8 ) * 0.9,
-		// ~0.75 Mbps up
-		uploadThroughput: ( ( 750 * 1000 ) / 8 ) * 0.9,
-		// 150ms RTT
-		latency: 150 * 3.75,
-	},
-	// alias to Fast 3G to align with Lighthouse (crbug.com/342406608)
-	// and DevTools (crbug.com/342406608),
-	'Slow 4G': {
-		offline: false,
-		// ~1.6 Mbps down
-		downloadThroughput: ( ( 1.6 * 1000 * 1000 ) / 8 ) * 0.9,
-		// ~0.75 Mbps up
-		uploadThroughput: ( ( 750 * 1000 ) / 8 ) * 0.9,
-		// 150ms RTT
-		latency: 150 * 3.75,
-	},
-	'Fast 4G': {
-		offline: false,
-		// 9 Mbps down
-		downloadThroughput: ( ( 9 * 1000 * 1000 ) / 8 ) * 0.9,
-		// 1.5 Mbps up
-		uploadThroughput: ( ( 1.5 * 1000 * 1000 ) / 8 ) * 0.9,
-		// 60ms RTT
-		latency: 60 * 2.75,
-	},
-	/**
-	 * Network conditions used for desktop in Lighthouse/PSI.
-	 *
-	 * 10,240 kb/s throughput with 40 ms TCP RTT.
-	 *
-	 * @see https://github.com/paulirish/lighthouse/blob/f0855904aaffaecf3089169449646960782d7e92/core/config/constants.js#L40-L49
-	 * @see https://docs.google.com/document/d/1-p4HSp42REEA5-jCBVB6PqQcVhI1nQIblBCNKhPJUXg/edit?tab=t.0#heading=h.jsap7yf4phk6
-	 */
-	Broadband: {
-		offline: false,
-		downloadThroughput: ( 10240 * 1000 ) / 8,
-		uploadThroughput: ( 10240 * 1000 ) / 8,
-		latency: 40,
-	},
-};
-
-export async function emulateNetworkConditions(
-	this: PageUtils,
-	condition: keyof typeof PredefinedNetworkConditions | NetworkConditions
-) {
-	if ( 'chromium' !== this.browserName ) {
-		throw new Error(
-			'CDP sessions are only supported on Chromium-based browsers'
-		);
-	}
-
-	const session = await this.page.context().newCDPSession( this.page );
-	await session.send(
-		'Network.emulateNetworkConditions',
-		'string' === typeof condition
-			? PredefinedNetworkConditions[ condition ]
-			: condition
-	);
-	await session.detach();
-}

package/src/page-utils/index.ts

@@ -1,54 +0,0 @@
-/**
- * External dependencies
- */
-import type {
-	Browser,
-	Page,
-	BrowserContext,
-	PlaywrightWorkerOptions,
-} from '@playwright/test';
-
-/**
- * Internal dependencies
- */
-import { dragFiles } from './drag-files';
-import { isCurrentURL } from './is-current-url';
-import { setClipboardData, pressKeys } from './press-keys';
-import { setBrowserViewport } from './set-browser-viewport';
-import { emulateNetworkConditions } from './emulate-network-conditions';
-
-type PageUtilConstructorParams = {
-	page: Page;
-	browserName: PlaywrightWorkerOptions[ 'browserName' ];
-};
-
-class PageUtils {
-	browser: Browser;
-	page: Page;
-	context: BrowserContext;
-	browserName: PlaywrightWorkerOptions[ 'browserName' ];
-
-	constructor( { page, browserName }: PageUtilConstructorParams ) {
-		this.page = page;
-		this.context = page.context();
-		this.browser = this.context.browser()!;
-		this.browserName = browserName;
-	}
-
-	/** @borrows dragFiles as this.dragFiles */
-	dragFiles: typeof dragFiles = dragFiles.bind( this );
-	/** @borrows isCurrentURL as this.isCurrentURL */
-	isCurrentURL: typeof isCurrentURL = isCurrentURL.bind( this );
-	/** @borrows pressKeys as this.pressKeys */
-	pressKeys: typeof pressKeys = pressKeys.bind( this );
-	/** @borrows setBrowserViewport as this.setBrowserViewport */
-	setBrowserViewport: typeof setBrowserViewport =
-		setBrowserViewport.bind( this );
-	/** @borrows setClipboardData as this.setClipboardData */
-	setClipboardData: typeof setClipboardData = setClipboardData.bind( this );
-	/** @borrows emulateNetworkConditions as this.emulateNetworkConditions */
-	emulateNetworkConditions: typeof emulateNetworkConditions =
-		emulateNetworkConditions.bind( this );
-}
-
-export { PageUtils };

package/src/page-utils/is-current-url.ts

@@ -1,20 +0,0 @@
-/**
- * Internal dependencies
- */
-import { WP_BASE_URL } from '../config';
-import type { PageUtils } from './';
-
-/**
- * Checks if current path of the URL matches the provided path.
- *
- * @param this
- * @param path String to be serialized as pathname.
- *
- * @return Boolean represents whether current URL is or not a WordPress path.
- */
-export function isCurrentURL( this: PageUtils, path: string ) {
-	const currentURL = new URL( this.page.url() );
-	const expectedURL = new URL( path, WP_BASE_URL );
-
-	return expectedURL.pathname === currentURL.pathname;
-}

package/src/page-utils/keycodes.ts

@@ -1,48 +0,0 @@
-/**
- * This filed is partially copied from @wordpress/keycodes to keep the package
- * (internal-)dependencies free.
- */
-
-/**
- * Keycode for ALT key.
- */
-export const ALT = 'alt';
-
-/**
- * Keycode for CTRL key.
- */
-export const CTRL = 'ctrl';
-
-/**
- * Keycode for COMMAND key.
- */
-export const COMMAND = 'meta';
-
-/**
- * Keycode for SHIFT key.
- */
-export const SHIFT = 'shift';
-
-/**
- * Object that contains functions that return the available modifier
- * depending on platform.
- */
-export const modifiers: Record<
-	string,
-	( _isApple: () => boolean ) => string[]
-> = {
-	primary: ( _isApple ) => ( _isApple() ? [ COMMAND ] : [ CTRL ] ),
-	primaryShift: ( _isApple ) =>
-		_isApple() ? [ SHIFT, COMMAND ] : [ CTRL, SHIFT ],
-	primaryAlt: ( _isApple ) =>
-		_isApple() ? [ ALT, COMMAND ] : [ CTRL, ALT ],
-	secondary: ( _isApple ) =>
-		_isApple() ? [ SHIFT, ALT, COMMAND ] : [ CTRL, SHIFT, ALT ],
-	access: ( _isApple ) => ( _isApple() ? [ CTRL, ALT ] : [ SHIFT, ALT ] ),
-	ctrl: () => [ CTRL ],
-	alt: () => [ ALT ],
-	ctrlShift: () => [ CTRL, SHIFT ],
-	shift: () => [ SHIFT ],
-	shiftAlt: () => [ SHIFT, ALT ],
-	undefined: () => [],
-};

package/src/page-utils/press-keys.ts

@@ -1,195 +0,0 @@
-/**
- * External dependencies
- */
-import { capitalCase } from 'change-case';
-import type { Page } from '@playwright/test';
-
-/**
- * Internal dependencies
- */
-import type { PageUtils } from './';
-import { modifiers as baseModifiers, SHIFT, ALT, CTRL } from './keycodes';
-
-let clipboardDataHolder: {
-	'text/plain': string;
-	'text/html': string;
-	'rich-text': string;
-} = {
-	'text/plain': '',
-	'text/html': '',
-	'rich-text': '',
-};
-
-/**
- * Sets the clipboard data that can be pasted with
- * `pressKeys( 'primary+v' )`.
- *
- * @param clipboardData
- * @param clipboardData.plainText
- * @param clipboardData.html
- */
-export function setClipboardData(
-	this: PageUtils,
-	{ plainText = '', html = '' }
-) {
-	clipboardDataHolder = {
-		'text/plain': plainText,
-		'text/html': html,
-		'rich-text': '',
-	};
-}
-
-async function emulateClipboard( page: Page, type: 'copy' | 'cut' | 'paste' ) {
-	const output = await page.evaluate(
-		( [ _type, _clipboardData ] ) => {
-			const canvasDoc =
-				// @ts-ignore
-				document.activeElement?.contentDocument ?? document;
-			const event = new ClipboardEvent( _type, {
-				bubbles: true,
-				cancelable: true,
-				clipboardData: new DataTransfer(),
-			} );
-
-			if ( ! event.clipboardData ) {
-				throw new Error( 'ClipboardEvent.clipboardData is null' );
-			}
-
-			if ( _type === 'paste' ) {
-				event.clipboardData.setData(
-					'text/plain',
-					_clipboardData[ 'text/plain' ]
-				);
-				event.clipboardData.setData(
-					'text/html',
-					_clipboardData[ 'text/html' ]
-				);
-				event.clipboardData.setData(
-					'rich-text',
-					_clipboardData[ 'rich-text' ]
-				);
-			} else {
-				const selection = canvasDoc.defaultView.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 ) =>
-								( node as Element ).outerHTML ??
-								( node as Element ).nodeValue
-						)
-						.join( '' );
-				}
-				event.clipboardData.setData( 'text/plain', plainText );
-				event.clipboardData.setData( 'text/html', html );
-			}
-
-			canvasDoc.activeElement.dispatchEvent( event );
-
-			if ( _type === 'paste' ) {
-				return event.defaultPrevented;
-			}
-
-			return {
-				'text/plain': event.clipboardData.getData( 'text/plain' ),
-				'text/html': event.clipboardData.getData( 'text/html' ),
-				'rich-text': event.clipboardData.getData( 'rich-text' ),
-			};
-		},
-		[ type, clipboardDataHolder ] as const
-	);
-
-	if ( typeof output === 'object' ) {
-		clipboardDataHolder = output;
-	}
-
-	if ( output === false ) {
-		// Emulate paste by typing the clipboard content, which works across all
-		// elements and documents (keyboard.type does uses the nested active
-		// element automatically).
-		await page.keyboard.type( clipboardDataHolder[ 'text/plain' ] );
-	}
-}
-
-const isAppleOS = () => process.platform === 'darwin';
-
-const isWebkit = ( page: Page ) =>
-	page.context().browser()!.browserType().name() === 'webkit';
-
-const browserCache = new WeakMap();
-const getHasNaturalTabNavigation = async ( page: Page ) => {
-	if ( ! isAppleOS() || ! isWebkit( page ) ) {
-		return true;
-	}
-	if ( browserCache.has( page.context().browser()! ) ) {
-		return browserCache.get( page.context().browser()! );
-	}
-	const testPage = await page.context().newPage();
-	await testPage.setContent( `<button>1</button><button>2</button>` );
-	await testPage.getByText( '1' ).focus();
-	await testPage.keyboard.press( 'Tab' );
-	const featureDetected = await testPage
-		.getByText( '2' )
-		.evaluate( ( node ) => node === document.activeElement );
-	browserCache.set( page.context().browser()!, featureDetected );
-	await testPage.close();
-	return featureDetected;
-};
-
-type Options = {
-	times?: number;
-	delay?: number;
-};
-
-const modifiers = {
-	...baseModifiers,
-	shiftAlt: ( _isApple: () => boolean ) =>
-		_isApple() ? [ SHIFT, ALT ] : [ SHIFT, CTRL ],
-};
-
-export async function pressKeys(
-	this: PageUtils,
-	key: string,
-	{ times, ...pressOptions }: Options = {}
-) {
-	const hasNaturalTabNavigation = await getHasNaturalTabNavigation(
-		this.page
-	);
-
-	let command: () => Promise< void >;
-
-	if ( key.toLowerCase() === 'primary+c' ) {
-		command = () => emulateClipboard( this.page, 'copy' );
-	} else if ( key.toLowerCase() === 'primary+x' ) {
-		command = () => emulateClipboard( this.page, 'cut' );
-	} else if ( key.toLowerCase() === 'primary+v' ) {
-		command = () => emulateClipboard( this.page, 'paste' );
-	} else {
-		const keys = key.split( '+' ).flatMap( ( keyCode ) => {
-			if ( Object.prototype.hasOwnProperty.call( modifiers, keyCode ) ) {
-				return modifiers[ keyCode as keyof typeof modifiers ](
-					isAppleOS
-				).map( ( modifier ) =>
-					modifier === CTRL ? 'Control' : capitalCase( modifier )
-				);
-			} else if ( keyCode === 'Tab' && ! hasNaturalTabNavigation ) {
-				return [ 'Alt', 'Tab' ];
-			}
-			return keyCode;
-		} );
-		const normalizedKeys = keys.join( '+' );
-		command = () => this.page.keyboard.press( normalizedKeys );
-	}
-
-	times = times ?? 1;
-	for ( let i = 0; i < times; i += 1 ) {
-		await command();
-
-		if ( times > 1 && pressOptions.delay ) {
-			await this.page.waitForTimeout( pressOptions.delay );
-		}
-	}
-}

package/src/request-utils/blocks.ts

@@ -1,58 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { RequestUtils } from './index';
-
-type CreateBlockPayload = {
-	date?: string;
-	date_gmt?: string;
-	slug?: string;
-	title: string;
-	status: 'publish' | 'future' | 'draft' | 'pending' | 'private';
-	content?: string;
-	meta?: unknown;
-	wp_pattern_category?: number[];
-};
-
-/**
- * Delete all blocks using REST API.
- *
- * @see https://developer.wordpress.org/rest-api/reference/blocks/#list-editor-blocks
- * @param this
- */
-export async function deleteAllBlocks( this: RequestUtils ) {
-	// List all blocks.
-	// https://developer.wordpress.org/rest-api/reference/blocks/#list-editor-blocks
-	const blocks = await this.rest( {
-		path: '/wp/v2/blocks',
-		params: {
-			per_page: 100,
-			// All possible statuses.
-			status: 'publish,future,draft,pending,private,trash',
-		},
-	} );
-
-	// Delete blocks.
-	// https://developer.wordpress.org/rest-api/reference/blocks/#delete-a-editor-block
-	// "/wp/v2/posts" not yet supports batch requests.
-	await this.batchRest(
-		blocks.map( ( block: { id: number } ) => ( {
-			method: 'DELETE',
-			path: `/wp/v2/blocks/${ block.id }?force=true`,
-		} ) )
-	);
-}
-
-/**
- * Creates a new block using the REST API.
- *
- * @see https://developer.wordpress.org/rest-api/reference/blocks/#create-a-editor-block.
- * @param this
- * @param payload Block payload.
- */
-export async function createBlock(
-	this: RequestUtils,
-	payload: CreateBlockPayload
-) {
-	return this.createRecord( 'blocks', { ...payload } );
-}