From c17330281150ff1bcf310b97986ef3436cf4061b Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Mon, 13 Nov 2023 14:40:31 +0400 Subject: [PATCH] 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 --- package-lock.json | 102 +++++++++++++----- package.json | 2 +- .../src/page-utils/drag-files.ts | 36 ++++--- packages/scripts/package.json | 4 +- packages/scripts/scripts/test-playwright.js | 6 +- test/e2e/specs/editor/blocks/image.spec.js | 40 +++++-- .../e2e/specs/editor/blocks/paragraph.spec.js | 4 +- .../editor/various/draggable-blocks.spec.js | 4 +- .../various/multi-block-selection.spec.js | 13 ++- 9 files changed, 140 insertions(+), 71 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8b64b911fae9fa..fa546d9c900f81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -95,7 +95,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", @@ -7136,22 +7136,18 @@ } }, "node_modules/@playwright/test": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.0.tgz", - "integrity": "sha512-zOdGloaF0jeec7hqoLqM5S3L2rR4WxMJs6lgiAeR70JlH7Ml54ZPoIIf3X7cvnKde3Q9jJ/gaxkFh8fYI9s1rg==", + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.39.0.tgz", + "integrity": "sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==", "dev": true, "dependencies": { - "@types/node": "*", - "playwright-core": "1.32.0" + "playwright": "1.39.0" }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=14" - }, - "optionalDependencies": { - "fsevents": "2.3.2" + "node": ">=16" } }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { @@ -43229,16 +43225,34 @@ "integrity": "sha512-TuvHS8AOIZNAlE77WUDiR4rySV/VMptyMfcfeoMgs4P8apaZM3JrnbzBiixKUv+XR6i+BXrQh8WAnjaSPFO65Q==", "dev": true }, - "node_modules/playwright-core": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.0.tgz", - "integrity": "sha512-Z9Ij17X5Z3bjpp6XKujGBp9Gv4eViESac9aDmwgQFUEJBW0K80T21m/Z+XJQlu4cNsvPygw33b6V1Va6Bda5zQ==", + "node_modules/playwright": { + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.39.0.tgz", + "integrity": "sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==", "dev": true, + "dependencies": { + "playwright-core": "1.39.0" + }, "bin": { "playwright": "cli.js" }, "engines": { - "node": ">=14" + "node": ">=16" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright/node_modules/playwright-core": { + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz", + "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==", + "dev": true, + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=16" } }, "node_modules/please-upgrade-node": { @@ -56443,7 +56457,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", @@ -56470,11 +56484,23 @@ "npm": ">=6.14.4" }, "peerDependencies": { - "@playwright/test": "^1.32.0", + "@playwright/test": "^1.39.0", "react": "^18.0.0", "react-dom": "^18.0.0" } }, + "packages/scripts/node_modules/playwright-core": { + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz", + "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==", + "dev": true, + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=16" + } + }, "packages/server-side-render": { "name": "@wordpress/server-side-render", "version": "4.22.0", @@ -61619,14 +61645,12 @@ } }, "@playwright/test": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.0.tgz", - "integrity": "sha512-zOdGloaF0jeec7hqoLqM5S3L2rR4WxMJs6lgiAeR70JlH7Ml54ZPoIIf3X7cvnKde3Q9jJ/gaxkFh8fYI9s1rg==", + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.39.0.tgz", + "integrity": "sha512-3u1iFqgzl7zr004bGPYiN/5EZpRUSFddQBra8Rqll5N0/vfpqlP9I9EXqAoGacuAbX6c9Ulg/Cjqglp5VkK6UQ==", "dev": true, "requires": { - "@types/node": "*", - "fsevents": "2.3.2", - "playwright-core": "1.32.0" + "playwright": "1.39.0" } }, "@pmmmwh/react-refresh-webpack-plugin": { @@ -71116,7 +71140,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", @@ -71134,6 +71158,14 @@ "webpack-bundle-analyzer": "^4.9.1", "webpack-cli": "^5.1.4", "webpack-dev-server": "^4.15.1" + }, + "dependencies": { + "playwright-core": { + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz", + "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==", + "dev": true + } } }, "@wordpress/server-side-render": { @@ -90185,11 +90217,23 @@ "integrity": "sha512-TuvHS8AOIZNAlE77WUDiR4rySV/VMptyMfcfeoMgs4P8apaZM3JrnbzBiixKUv+XR6i+BXrQh8WAnjaSPFO65Q==", "dev": true }, - "playwright-core": { - "version": "1.32.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.0.tgz", - "integrity": "sha512-Z9Ij17X5Z3bjpp6XKujGBp9Gv4eViESac9aDmwgQFUEJBW0K80T21m/Z+XJQlu4cNsvPygw33b6V1Va6Bda5zQ==", - "dev": true + "playwright": { + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.39.0.tgz", + "integrity": "sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==", + "dev": true, + "requires": { + "fsevents": "2.3.2", + "playwright-core": "1.39.0" + }, + "dependencies": { + "playwright-core": { + "version": "1.39.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.39.0.tgz", + "integrity": "sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==", + "dev": true + } + } }, "please-upgrade-node": { "version": "3.2.0", diff --git a/package.json b/package.json index 266cbcc802d14e..a9d0842523a7ff 100644 --- a/package.json +++ b/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", diff --git a/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts b/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts index fa43fc76d27c33..d0af0b499f286b 100644 --- a/packages/e2e-test-utils-playwright/src/page-utils/drag-files.ts +++ b/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(); }, diff --git a/packages/scripts/package.json b/packages/scripts/package.json index 346ae02fc4b9bc..8cfd0a6e614cdb 100644 --- a/packages/scripts/package.json +++ b/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" }, diff --git a/packages/scripts/scripts/test-playwright.js b/packages/scripts/scripts/test-playwright.js index 32345bcaa0d255..71bc6a63320cf1 100644 --- a/packages/scripts/scripts/test-playwright.js +++ b/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', } diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js index db3ff72e3ab6eb..85590e9ec15964 100644 --- a/test/e2e/specs/editor/blocks/image.spec.js +++ b/test/e2e/specs/editor/blocks/image.spec.js @@ -47,7 +47,9 @@ test.describe( 'Image', () => { imageBlock.locator( 'data-testid=form-file-upload-input' ) ); - const image = imageBlock.locator( 'role=img' ); + const image = imageBlock.getByRole( 'img', { + name: 'This image has an empty alt attribute', + } ); await expect( image ).toBeVisible(); await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) ); @@ -69,7 +71,9 @@ test.describe( 'Image', () => { const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); - const image = imageBlock.locator( 'role=img' ); + const image = imageBlock.getByRole( 'img', { + name: 'This image has an empty alt attribute', + } ); const filename = await imageBlockUtils.upload( imageBlock.locator( 'data-testid=form-file-upload-input' ) @@ -98,7 +102,9 @@ test.describe( 'Image', () => { const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); - const image = imageBlock.locator( 'role=img' ); + const image = imageBlock.getByRole( 'img', { + name: 'This image has an empty alt attribute', + } ); const fileName = await imageBlockUtils.upload( imageBlock.locator( 'data-testid=form-file-upload-input' ) @@ -129,7 +135,9 @@ test.describe( 'Image', () => { const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); - const image = imageBlock.locator( 'role=img' ); + const image = imageBlock.getByRole( 'img', { + name: 'This image has an empty alt attribute', + } ); const fileName = await imageBlockUtils.upload( imageBlock.locator( 'data-testid=form-file-upload-input' ) @@ -182,7 +190,9 @@ test.describe( 'Image', () => { const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); - const image = imageBlock.locator( 'role=img' ); + const image = imageBlock.getByRole( 'img', { + name: 'This image has an empty alt attribute', + } ); const tmpInput = await page.evaluateHandle( () => { const input = document.createElement( 'input' ); @@ -226,7 +236,9 @@ test.describe( 'Image', () => { const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); - const image = imageBlock.locator( 'role=img' ); + const image = imageBlock.getByRole( 'img', { + name: 'This image has an empty alt attribute', + } ); const filename = await imageBlockUtils.upload( imageBlock.locator( 'data-testid=form-file-upload-input' ) @@ -292,7 +304,9 @@ test.describe( 'Image', () => { const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); - const image = imageBlock.locator( 'role=img' ); + const image = imageBlock.getByRole( 'img', { + name: 'This image has an empty alt attribute', + } ); const filename = await imageBlockUtils.upload( imageBlock.locator( 'data-testid=form-file-upload-input' ) @@ -349,7 +363,9 @@ test.describe( 'Image', () => { const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); - const image = imageBlock.locator( 'role=img' ); + const image = imageBlock.getByRole( 'img', { + name: 'This image has an empty alt attribute', + } ); const filename = await imageBlockUtils.upload( imageBlock.locator( 'data-testid=form-file-upload-input' ) @@ -385,7 +401,9 @@ test.describe( 'Image', () => { const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' ); - const image = imageBlock.locator( 'role=img' ); + const image = imageBlock.getByRole( 'img', { + name: 'This image has an empty alt attribute', + } ); const filename = await imageBlockUtils.upload( imageBlock.locator( 'data-testid=form-file-upload-input' ) @@ -572,7 +590,9 @@ test.describe( 'Image', () => { imageBlock.locator( 'data-testid=form-file-upload-input' ) ); - const imageInEditor = imageBlock.locator( 'role=img' ); + const imageInEditor = imageBlock.getByRole( 'img', { + name: 'This image has an empty alt attribute', + } ); await expect( imageInEditor ).toBeVisible(); await expect( imageInEditor ).toHaveAttribute( 'src', diff --git a/test/e2e/specs/editor/blocks/paragraph.spec.js b/test/e2e/specs/editor/blocks/paragraph.spec.js index 3cf3654870a351..142b01be282d48 100644 --- a/test/e2e/specs/editor/blocks/paragraph.spec.js +++ b/test/e2e/specs/editor/blocks/paragraph.spec.js @@ -83,9 +83,7 @@ test.describe( 'Paragraph', () => { await expect( draggingUtils.dropZone ).toBeVisible(); await expect( draggingUtils.insertionIndicator ).toBeHidden(); - await drop( - editor.canvas.locator( '[data-type="core/paragraph"]' ) - ); + await drop(); const imageBlock = editor.canvas.locator( 'role=document[name="Block: Image"i]' diff --git a/test/e2e/specs/editor/various/draggable-blocks.spec.js b/test/e2e/specs/editor/various/draggable-blocks.spec.js index fb56b43dc6e031..29a81f57540e06 100644 --- a/test/e2e/specs/editor/various/draggable-blocks.spec.js +++ b/test/e2e/specs/editor/various/draggable-blocks.spec.js @@ -414,7 +414,7 @@ test.describe( 'Draggable block', () => { 'Dragging over the empty group block but outside the appender should still show the blue background' ).toHaveCSS( 'background-color', 'rgb(0, 124, 186)' ); - await drop( rowBlock ); + await drop(); await expect( rowAppender ).toBeHidden(); await expect.poll( editor.getBlocks ).toMatchObject( [ { @@ -446,7 +446,7 @@ test.describe( 'Draggable block', () => { 'rgb(0, 124, 186)' ); - await drop( columnAppender ); + await drop(); await expect( columnAppender ).toBeHidden(); await expect.poll( editor.getBlocks ).toMatchObject( [ { name: 'core/group' }, diff --git a/test/e2e/specs/editor/various/multi-block-selection.spec.js b/test/e2e/specs/editor/various/multi-block-selection.spec.js index 4fb39783954fad..585e4f1851373a 100644 --- a/test/e2e/specs/editor/various/multi-block-selection.spec.js +++ b/test/e2e/specs/editor/various/multi-block-selection.spec.js @@ -247,15 +247,14 @@ test.describe( 'Multi-block selection', () => { editor, multiBlockSelectionUtils, } ) => { - // To do: run with iframe. - await editor.switchToLegacyCanvas(); - - await page.getByRole( 'button', { name: 'Add default block' } ).click(); + await editor.canvas + .getByRole( 'button', { name: 'Add default block' } ) + .click(); await page.keyboard.type( '1' ); await page.keyboard.press( 'Enter' ); await page.keyboard.type( '2' ); - await page + await editor.canvas .getByRole( 'document', { name: 'Block: Paragraph' } ) .filter( { hasText: '1' } ) .click( { modifiers: [ 'Shift' ] } ); @@ -272,11 +271,11 @@ test.describe( 'Multi-block selection', () => { .getByRole( 'toolbar', { name: 'Block tools' } ) .getByRole( 'button', { name: 'Group' } ) .click(); - await page + await editor.canvas .getByRole( 'document', { name: 'Block: Paragraph' } ) .filter( { hasText: '1' } ) .click(); - await page + await editor.canvas .getByRole( 'document', { name: 'Block: Paragraph' } ) .filter( { hasText: '2' } ) .click( { modifiers: [ 'Shift' ] } );