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

package/src/editor/show-block-toolbar.ts

@@ -1,20 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-/**
- * The block toolbar is not always visible while typing.
- * Call this function to reveal it.
- *
- * @param this
- */
-export async function showBlockToolbar( this: Editor ) {
-	// Move the mouse to disable the isTyping mode. We need at least three
-	// mousemove events for it to work across windows (iframe). With three
-	// moves, it's a guarantee that at least two will be in the same window.
-	// Two events are required for the flag to be unset.
-	await this.page.mouse.move( 50, 50 );
-	await this.page.mouse.move( 75, 75 );
-	await this.page.mouse.move( 100, 100 );
-}

package/src/editor/site-editor.ts

@@ -1,55 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-interface Options {
-	// If the only dirty entity is the current one, skip opening the save panel.
-	isOnlyCurrentEntityDirty?: boolean;
-}
-
-/**
- * Save entities in the site editor. Assumes the editor is in a dirty state.
- *
- * @param this
- * @param options
- */
-export async function saveSiteEditorEntities(
-	this: Editor,
-	options: Options = {}
-) {
-	const editorTopBar = this.page.getByRole( 'region', {
-		name: 'Editor top bar',
-	} );
-
-	// If we have changes in a single entity which can be published the label is `Publish`.
-	const saveButton = editorTopBar.getByRole( 'button', {
-		name: 'Save',
-		exact: true,
-	} );
-	const publishButton = editorTopBar.getByRole( 'button', {
-		name: 'Publish',
-	} );
-	const publishButtonIsVisible = ! ( await saveButton.isVisible() );
-	// First Save button in the top bar.
-	const buttonToClick = publishButtonIsVisible ? publishButton : saveButton;
-	await buttonToClick.click();
-
-	if ( ! options.isOnlyCurrentEntityDirty ) {
-		// Second Save button in the entities panel.
-		await this.page
-			.getByRole( 'region', {
-				name: /(Editor publish|Save panel)/,
-			} )
-			.getByRole( 'button', { name: 'Save', exact: true } )
-			.click();
-	}
-	// The text in the notice can be different based on the edited entity, whether
-	// we are saving multiple entities and whether we publish or update. So for now,
-	// we locate it based on the last part.
-	await this.page
-		.getByRole( 'button', { name: 'Dismiss this notice' } )
-		.getByText( /(updated|published)\./ )
-		.first()
-		.waitFor();
-}

package/src/editor/switch-editor-tool.ts

@@ -1,34 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-/**
- * Switch the editor tool being used.
- *
- * @param this
- * @param label The text string of the button label.
- */
-export async function switchEditorTool( this: Editor, label: string ) {
-	const toolsToolbar = this.page.getByRole( 'toolbar', {
-		name: 'Document tools',
-	} );
-	await toolsToolbar
-		.getByRole( 'button', {
-			name: 'Tools',
-		} )
-		.click();
-	const menu = this.page.getByRole( 'menu', {
-		name: 'Tools',
-	} );
-	await menu
-		.getByRole( 'menuitemradio', {
-			name: label,
-		} )
-		.click();
-	await toolsToolbar
-		.getByRole( 'button', {
-			name: 'Tools',
-		} )
-		.click();
-}

package/src/editor/switch-to-legacy-canvas.ts

@@ -1,20 +0,0 @@
-/**
- * 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',
-		} );
-	} );
-}

package/src/editor/transform-block-to.ts

@@ -1,34 +0,0 @@
-/**
- * Internal dependencies
- */
-import type { Editor } from './index';
-
-/**
- * Clicks the default block appender.
- *
- * @param this
- * @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
-				.select( 'core/block-editor' )
-				.getSelectedBlockClientIds();
-			const blocks = window.wp.data
-				.select( 'core/block-editor' )
-				.getBlocksByClientId( clientIds );
-			window.wp.data
-				.dispatch( 'core/block-editor' )
-				.replaceBlocks(
-					clientIds,
-					window.wp.blocks.switchToBlockType( blocks, blockName )
-				);
-		},
-		[ name ]
-	);
-}

package/src/index.ts

@@ -1,8 +0,0 @@
-export type * from './types';
-export { Admin } from './admin';
-export { Editor } from './editor';
-export { PageUtils } from './page-utils';
-export { RequestUtils } from './request-utils';
-export { Metrics } from './metrics';
-export { Lighthouse } from './lighthouse';
-export { test, expect } from './test';

package/src/lighthouse/index.ts

@@ -1,75 +0,0 @@
-/**
- * External dependencies
- */
-import type { Page } from '@playwright/test';
-import lighthouse from 'lighthouse/core/index.cjs';
-
-type LighthouseConstructorProps = {
-	page: Page;
-	port: number;
-};
-
-export class Lighthouse {
-	page: Page;
-	port: number;
-
-	constructor( { page, port }: LighthouseConstructorProps ) {
-		this.page = page;
-		this.port = port;
-	}
-
-	/**
-	 * Returns the Lighthouse report for the current URL.
-	 *
-	 * Runs several Lighthouse audits in a separate browser window and returns
-	 * the summary.
-	 */
-	async getReport() {
-		// From https://github.com/GoogleChrome/lighthouse/blob/36cac182a6c637b1671c57326d7c0241633d0076/core/config/default-config.js#L381-L446
-		const audits = {
-			'largest-contentful-paint': 'LCP',
-			'total-blocking-time': 'TBT',
-			interactive: 'TTI',
-			'cumulative-layout-shift': 'CLS',
-			'interaction-to-next-paint': 'INP',
-		};
-
-		const report = await lighthouse(
-			this.page.url(),
-			{ port: this.port },
-			{
-				extends: 'lighthouse:default',
-				settings: {
-					// "provided" means no throttling.
-					// TODO: Make configurable.
-					throttlingMethod: 'provided',
-					// Default is "mobile".
-					// See https://github.com/GoogleChrome/lighthouse/blob/main/docs/emulation.md
-					// TODO: Make configurable.
-					formFactor: 'desktop',
-					screenEmulation: {
-						disabled: true,
-					},
-					// Speeds up the report.
-					disableFullPageScreenshot: true,
-					// Only run certain audits to speed things up.
-					onlyAudits: Object.keys( audits ),
-				},
-			}
-		);
-
-		const result: Record< string, number > = {};
-
-		if ( ! report ) {
-			return result;
-		}
-
-		const { lhr } = report;
-
-		for ( const [ audit, acronym ] of Object.entries( audits ) ) {
-			result[ acronym ] = lhr.audits[ audit ]?.numericValue || 0;
-		}
-
-		return result;
-	}
-}

package/src/metrics/index.ts

@@ -1,441 +0,0 @@
-/**
- * External dependencies
- */
-import { mkdir, writeFile } from 'fs/promises';
-import { join } from 'path';
-import type { Page, Browser } from '@playwright/test';
-// resolution-mode support in TypeScript 5.3 will resolve this.
-// See https://devblogs.microsoft.com/typescript/announcing-typescript-5-3-beta/
-// @ts-expect-error
-import type { Metric } from 'web-vitals';
-
-type EventType =
-	| 'click'
-	| 'focus'
-	| 'focusin'
-	| 'keydown'
-	| 'keypress'
-	| 'keyup'
-	| 'mouseout'
-	| 'mouseover';
-
-interface TraceEvent {
-	cat: string;
-	name: string;
-	dur?: number;
-	args: {
-		data?: {
-			type: EventType;
-		};
-	};
-}
-
-interface Trace {
-	traceEvents: TraceEvent[];
-}
-
-type MetricsConstructorProps = {
-	page: Page;
-};
-
-interface WebVitalsMeasurements {
-	CLS?: number;
-	FCP?: number;
-	FID?: number;
-	INP?: number;
-	LCP?: number;
-	TTFB?: number;
-}
-
-export class Metrics {
-	browser: Browser;
-	page: Page;
-	trace: Trace;
-
-	webVitals: WebVitalsMeasurements = {};
-
-	constructor( { page }: MetricsConstructorProps ) {
-		this.page = page;
-		this.browser = page.context().browser()!;
-		this.trace = { traceEvents: [] };
-	}
-
-	/**
-	 * Returns durations from the Server-Timing header.
-	 *
-	 * @param fields Optional fields to filter.
-	 */
-	async getServerTiming( fields: string[] = [] ) {
-		return this.page.evaluate< Record< string, number >, string[] >(
-			( f: string[] ) =>
-				(
-					performance.getEntriesByType(
-						'navigation'
-					) as PerformanceNavigationTiming[]
-				 )[ 0 ].serverTiming.reduce(
-					( acc, entry ) => {
-						if ( f.length === 0 || f.includes( entry.name ) ) {
-							acc[ entry.name ] = entry.duration;
-						}
-						return acc;
-					},
-					{} as Record< string, number >
-				),
-			fields
-		);
-	}
-
-	/**
-	 * Returns time to first byte (TTFB) using the Navigation Timing API.
-	 *
-	 * @see https://web.dev/ttfb/#measure-ttfb-in-javascript
-	 *
-	 * @return TTFB value.
-	 */
-	async getTimeToFirstByte() {
-		return await this.page.evaluate< number >( () => {
-			const { responseStart, startTime } = (
-				performance.getEntriesByType(
-					'navigation'
-				) as PerformanceNavigationTiming[]
-			 )[ 0 ];
-			return responseStart - startTime;
-		} );
-	}
-
-	/**
-	 * Returns the Largest Contentful Paint (LCP) value using the dedicated API.
-	 *
-	 * @see https://w3c.github.io/largest-contentful-paint/
-	 * @see https://web.dev/lcp/#measure-lcp-in-javascript
-	 *
-	 * @return LCP value.
-	 */
-	async getLargestContentfulPaint() {
-		return await this.page.evaluate< number >(
-			() =>
-				new Promise( ( resolve ) => {
-					new PerformanceObserver( ( entryList ) => {
-						const entries = entryList.getEntries();
-						// The last entry is the largest contentful paint.
-						const largestPaintEntry = entries.at( -1 );
-
-						resolve( largestPaintEntry?.startTime || 0 );
-					} ).observe( {
-						type: 'largest-contentful-paint',
-						buffered: true,
-					} );
-				} )
-		);
-	}
-
-	/**
-	 * Returns the Cumulative Layout Shift (CLS) value using the dedicated API.
-	 *
-	 * @see https://github.com/WICG/layout-instability
-	 * @see https://web.dev/cls/#measure-layout-shifts-in-javascript
-	 *
-	 * @return CLS value.
-	 */
-	async getCumulativeLayoutShift() {
-		return await this.page.evaluate< number >(
-			() =>
-				new Promise( ( resolve ) => {
-					let CLS = 0;
-
-					new PerformanceObserver( ( l ) => {
-						const entries = l.getEntries() as LayoutShift[];
-
-						entries.forEach( ( entry ) => {
-							if ( ! entry.hadRecentInput ) {
-								CLS += entry.value;
-							}
-						} );
-
-						resolve( CLS );
-					} ).observe( {
-						type: 'layout-shift',
-						buffered: true,
-					} );
-				} )
-		);
-	}
-
-	/**
-	 * Returns the loading durations using the Navigation Timing API. All the
-	 * durations exclude the server response time.
-	 *
-	 * @return Object with loading metrics durations.
-	 */
-	async getLoadingDurations() {
-		return await this.page.evaluate( () => {
-			const [
-				{
-					requestStart,
-					responseStart,
-					responseEnd,
-					domContentLoadedEventEnd,
-					loadEventEnd,
-				},
-			] = performance.getEntriesByType(
-				'navigation'
-			) as PerformanceNavigationTiming[];
-			const paintTimings = performance.getEntriesByType(
-				'paint'
-			) as PerformancePaintTiming[];
-
-			const firstPaintStartTime = paintTimings.find(
-				( { name } ) => name === 'first-paint'
-			)!.startTime;
-
-			const firstContentfulPaintStartTime = paintTimings.find(
-				( { name } ) => name === 'first-contentful-paint'
-			)!.startTime;
-
-			return {
-				// Server side metric.
-				serverResponse: responseStart - requestStart,
-				// For client side metrics, consider the end of the response (the
-				// browser receives the HTML) as the start time (0).
-				firstPaint: firstPaintStartTime - responseEnd,
-				domContentLoaded: domContentLoadedEventEnd - responseEnd,
-				loaded: loadEventEnd - responseEnd,
-				firstContentfulPaint:
-					firstContentfulPaintStartTime - responseEnd,
-				timeSinceResponseEnd: performance.now() - responseEnd,
-			};
-		} );
-	}
-
-	/**
-	 * Starts Chromium tracing with predefined options for performance testing.
-	 *
-	 * The category set mirrors what Chrome DevTools enables when recording in
-	 * the Performance panel: `devtools.timeline` provides the top-level event
-	 * tree, and the `disabled-by-default-v8.cpu_profiler` + companion
-	 * `devtools.timeline.stack` categories enable the V8 sampler that
-	 * populates JavaScript call stacks. Without the latter, the saved trace
-	 * shows only opaque "Function call" blocks with no JS frames inside.
-	 *
-	 * @param options Options to pass to `browser.startTracing()`.
-	 */
-	async startTracing( options = {} ) {
-		return await this.browser.startTracing( this.page, {
-			screenshots: false,
-			categories: [
-				'devtools.timeline',
-				'disabled-by-default-devtools.timeline',
-				'disabled-by-default-devtools.timeline.stack',
-				'disabled-by-default-v8.cpu_profiler',
-				'v8.execute',
-			],
-			...options,
-		} );
-	}
-
-	/**
-	 * Stops Chromium tracing.
-	 *
-	 * When `name` is a non-empty string and the `WP_ARTIFACTS_PATH` environment
-	 * variable is set, the raw trace is written to
-	 * `${WP_ARTIFACTS_PATH}/traces/<name>.trace.json`. The resulting file can
-	 * be opened in Chrome DevTools (Performance panel → "Load profile…") to
-	 * inspect the flame graph. Pass a falsy value (or omit the argument) to
-	 * just parse the trace into `this.trace` without writing — this is the
-	 * default for iteration loops, where you typically want to save only one
-	 * representative sample. Callers pick which iteration that is, e.g.
-	 * `i === Math.floor( iterations / 2 ) && 'post-editor-first-block'`.
-	 *
-	 * @param name File name (without extension) identifying the scenario, or
-	 *             `false`/`undefined` to skip writing.
-	 */
-	async stopTracing( name?: string | false ) {
-		const traceBuffer = await this.browser.stopTracing();
-		const traceJSON = JSON.parse( traceBuffer.toString() );
-
-		this.trace = traceJSON;
-
-		if ( ! name ) {
-			return;
-		}
-
-		const artifactsPath = process.env.WP_ARTIFACTS_PATH;
-		if ( ! artifactsPath ) {
-			return;
-		}
-
-		// The perf comparison flow runs the same suite against multiple
-		// branches into a single artifacts directory; the comparison branches
-		// set WP_PERF_NO_TRACE so the head branch's traces aren't overwritten.
-		if ( process.env.WP_PERF_NO_TRACE ) {
-			return;
-		}
-
-		// Traces are saved minified. Run the following against a downloaded trace
-		// + matching `build/` directory to rewrite minified `functionName`s back
-		// to their source identifiers:
-		//
-		//   node tools/build-scripts/packages/resolve-trace-source-maps.cjs
-		//
-		// Or via the workspace script:
-		//
-		//   npm run --workspace @wordpress/build-scripts resolve-trace-source-maps -- <trace.json> [--build-dir <dir>]
-		const tracesDir = join( artifactsPath, 'traces' );
-		const filePath = join( tracesDir, `${ name }.trace.json` );
-		await mkdir( tracesDir, { recursive: true } );
-		await writeFile( filePath, JSON.stringify( traceJSON ) );
-	}
-
-	/**
-	 * @return Durations of all traced `keydown`, `keypress`, and `keyup`
-	 * events.
-	 */
-	getTypingEventDurations() {
-		return [
-			this.getEventDurations( 'keydown' ),
-			this.getEventDurations( 'keypress' ),
-			this.getEventDurations( 'keyup' ),
-		];
-	}
-
-	/**
-	 * @return Durations of all traced `focus` and `focusin` events.
-	 */
-	getSelectionEventDurations() {
-		return [
-			this.getEventDurations( 'focus' ),
-			this.getEventDurations( 'focusin' ),
-		];
-	}
-
-	/**
-	 * @return Durations of all traced `click` events.
-	 */
-	getClickEventDurations() {
-		return [ this.getEventDurations( 'click' ) ];
-	}
-
-	/**
-	 * @return Durations of all traced `mouseover` and `mouseout` events.
-	 */
-	getHoverEventDurations() {
-		return [
-			this.getEventDurations( 'mouseover' ),
-			this.getEventDurations( 'mouseout' ),
-		];
-	}
-
-	/**
-	 * @param eventType Type of event to filter.
-	 * @return Durations of all events of a given type.
-	 */
-	getEventDurations( eventType: EventType ) {
-		if ( this.trace.traceEvents.length === 0 ) {
-			throw new Error(
-				'No trace events found. Did you forget to call stopTracing()?'
-			);
-		}
-
-		return this.trace.traceEvents
-			.filter(
-				( item: TraceEvent ): boolean =>
-					item.cat === 'devtools.timeline' &&
-					item.name === 'EventDispatch' &&
-					item?.args?.data?.type === eventType &&
-					!! item.dur
-			)
-			.map( ( item ) => ( item.dur ? item.dur / 1000 : 0 ) );
-	}
-
-	/**
-	 * Initializes the web-vitals library upon next page navigation.
-	 *
-	 * Defaults to automatically triggering the navigation,
-	 * but it can also be done manually.
-	 *
-	 * @example
-	 * ```js
-	 * await metrics.initWebVitals();
-	 * console.log( await metrics.getWebVitals() );
-	 * ```
-	 *
-	 * @example
-	 * ```js
-	 * await metrics.initWebVitals( false );
-	 * await page.goto( '/some-other-page' );
-	 * console.log( await metrics.getWebVitals() );
-	 * ```
-	 *
-	 * @param reload Whether to force navigation by reloading the current page.
-	 */
-	async initWebVitals( reload = true ) {
-		await this.page.addInitScript( {
-			path: join(
-				__dirname,
-				'../../../../node_modules/web-vitals/dist/web-vitals.umd.cjs'
-			),
-		} );
-
-		await this.page.exposeFunction(
-			'__reportVitals__',
-			( data: string ) => {
-				const measurement: Metric = JSON.parse( data );
-				this.webVitals[ measurement.name ] = measurement.value;
-			}
-		);
-
-		await this.page.addInitScript( () => {
-			const reportVitals = ( measurement: unknown ) =>
-				window.__reportVitals__( JSON.stringify( measurement ) );
-
-			window.addEventListener( 'DOMContentLoaded', () => {
-				// @ts-expect-error This is valid but web-vitals does not register the global types.
-				window.webVitals.onCLS( reportVitals );
-				// @ts-expect-error This is valid but web-vitals does not register the global types.
-				window.webVitals.onFCP( reportVitals );
-				// @ts-expect-error This is valid but web-vitals does not register the global types.
-				window.webVitals.onFID( reportVitals );
-				// @ts-expect-error This is valid but web-vitals does not register the global types.
-				window.webVitals.onINP( reportVitals );
-				// @ts-expect-error This is valid but web-vitals does not register the global types.
-				window.webVitals.onLCP( reportVitals );
-				// @ts-expect-error This is valid but web-vitals does not register the global types.
-				window.webVitals.onTTFB( reportVitals );
-			} );
-		} );
-
-		if ( reload ) {
-			// By reloading the page the script will be applied.
-			await this.page.reload();
-		}
-	}
-
-	/**
-	 * Returns web vitals as collected by the web-vitals library.
-	 *
-	 * If the web-vitals library hasn't been loaded on the current page yet,
-	 * it will be initialized with a page reload.
-	 *
-	 * Reloads the page to force web-vitals to report all collected metrics.
-	 *
-	 * @return {WebVitalsMeasurements} Web vitals measurements.
-	 */
-	async getWebVitals() {
-		// Reset values.
-		this.webVitals = {};
-
-		const hasScript = await this.page.evaluate(
-			// @ts-expect-error This is valid but web-vitals does not register the global types.
-			() => typeof window.webVitals !== 'undefined'
-		);
-
-		if ( ! hasScript ) {
-			await this.initWebVitals();
-		}
-
-		// Trigger navigation so the web-vitals library reports values on unload.
-		await this.page.reload();
-
-		return this.webVitals;
-	}
-}