Upgrade Playwright to 1.39.0 (#54051)

* Bump to latest
* Revert unneeded changes for dragFiles
* Fix 'playwright-core' CLI path resolution
* Fix Image e2e tests
* Fix drop
* Fix failing 'should select with shift + click' e2e test

---------

Co-authored-by: Kai Hao <kai@kaihao.dev>

package.json

@@ -107,7 +107,7 @@
 		"@octokit/rest": "16.26.0",
 		"@octokit/types": "6.34.0",
 		"@octokit/webhooks-types": "5.6.0",
-		"@playwright/test": "1.32.0",
+		"@playwright/test": "1.39.0",
 		"@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
 		"@storybook/addon-a11y": "7.2.2",
 		"@storybook/addon-actions": "7.2.2",

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

@@ -9,7 +9,7 @@ import { getType } from 'mime';
  * Internal dependencies
  */
 import type { PageUtils } from './index';
-import type { ElementHandle, Locator } from '@playwright/test';
+import type { Locator } from '@playwright/test';
 
 type FileObject = {
 	name: string;
@@ -118,25 +118,29 @@ async function dragFiles(
 
 		/**
 		 * Drop the files at the current position.
-		 *
-		 * @param locator
 		 */
-		drop: async ( locator: Locator | ElementHandle | null ) => {
-			if ( ! locator ) {
-				const topMostElement = await this.page.evaluateHandle(
-					( { x, y } ) => {
-						return document.elementFromPoint( x, y );
-					},
-					position
-				);
-				locator = topMostElement.asElement();
-			}
+		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 ( ! locator ) {
+			if ( ! elementHandle ) {
 				throw new Error( 'Element not found.' );
 			}
 
-			const dataTransfer = await locator.evaluateHandle(
+			const dataTransfer = await elementHandle.evaluateHandle(
 				async ( _node, _fileObjects ) => {
 					const dt = new DataTransfer();
 					const fileInstances = await Promise.all(
@@ -159,7 +163,7 @@ async function dragFiles(
 				fileObjects
 			);
 
-			await locator.dispatchEvent( 'drop', { dataTransfer } );
+			await elementHandle.dispatchEvent( 'drop', { dataTransfer } );
 
 			await cdpSession.detach();
 		},

packages/scripts/package.json

@@ -72,7 +72,7 @@
 		"minimist": "^1.2.0",
 		"npm-package-json-lint": "^6.4.0",
 		"npm-packlist": "^3.0.0",
-		"playwright-core": "1.32.0",
+		"playwright-core": "1.39.0",
 		"postcss": "^8.4.5",
 		"postcss-loader": "^6.2.1",
 		"prettier": "npm:wp-prettier@3.0.3",
@@ -92,7 +92,7 @@
 		"webpack-dev-server": "^4.15.1"
 	},
 	"peerDependencies": {
-		"@playwright/test": "^1.32.0",
+		"@playwright/test": "^1.39.0",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
 	},

packages/scripts/scripts/test-playwright.js

@@ -12,6 +12,7 @@ process.on( 'unhandledRejection', ( err ) => {
 /**
  * External dependencies
  */
+const path = require( 'path' );
 const { resolve } = require( 'node:path' );
 const { sync: spawn } = require( 'cross-spawn' );
 
@@ -27,7 +28,10 @@ const {
 
 const result = spawn(
 	'node',
-	[ require.resolve( 'playwright-core/cli' ), 'install' ],
+	[
+		path.resolve( require.resolve( 'playwright-core' ), '..', 'cli.js' ),
+		'install',
+	],
 	{
 		stdio: 'inherit',
 	}