From 4a6ffee7ce42059ac96d7fa4daa38ed5316e9097 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 15 Feb 2023 09:48:56 +0800 Subject: [PATCH] Upgrade Playwright to 1.30.0 (#48007) * Upgrade Playwright to 1.30.0 * Update doc for best practices * Fix snapshot path * Fix strict locator * Try to fix safari test * Update image test to use visual testing * Update docs/contributors/code/e2e/README.md Co-authored-by: Glen Davies * Drop unnecessary await in toMatchSnapshot Co-authored-by: Bart Kalisz --------- Co-authored-by: Glen Davies Co-authored-by: Bart Kalisz --- docs/contributors/code/e2e/README.md | 20 ++--- package-lock.json | 66 +++++++------- package.json | 2 +- .../e2e-test-utils-playwright/src/test.ts | 18 ---- test/e2e/playwright.config.ts | 9 +- ...-ratio-using-the-crop-tools-1-chromium.png | Bin 0 -> 270 bytes ...-ratio-using-the-crop-tools-1-chromium.txt | 6 -- ...tating-using-the-crop-tools-1-chromium.png | Bin 0 -> 278 bytes ...tating-using-the-crop-tools-1-chromium.txt | 6 -- ...ooming-using-the-crop-tools-1-chromium.png | Bin 0 -> 260 bytes ...ooming-using-the-crop-tools-1-chromium.txt | 6 -- test/e2e/specs/editor/blocks/image.spec.js | 83 +++++++++++++----- test/e2e/specs/editor/blocks/list.spec.js | 2 +- 13 files changed, 110 insertions(+), 108 deletions(-) create mode 100644 test/e2e/specs/editor/blocks/__snapshots__/Image-allows-changing-aspect-ratio-using-the-crop-tools-1-chromium.png delete mode 100644 test/e2e/specs/editor/blocks/__snapshots__/Image-allows-changing-aspect-ratio-using-the-crop-tools-1-chromium.txt create mode 100644 test/e2e/specs/editor/blocks/__snapshots__/Image-allows-rotating-using-the-crop-tools-1-chromium.png delete mode 100644 test/e2e/specs/editor/blocks/__snapshots__/Image-allows-rotating-using-the-crop-tools-1-chromium.txt create mode 100644 test/e2e/specs/editor/blocks/__snapshots__/Image-allows-zooming-using-the-crop-tools-1-chromium.png delete mode 100644 test/e2e/specs/editor/blocks/__snapshots__/Image-allows-zooming-using-the-crop-tools-1-chromium.txt diff --git a/docs/contributors/code/e2e/README.md b/docs/contributors/code/e2e/README.md index 968db5638a6a9..1776fde77baf6 100644 --- a/docs/contributors/code/e2e/README.md +++ b/docs/contributors/code/e2e/README.md @@ -36,6 +36,8 @@ xvfb-run -- npm run test:e2e:playwright -- --project=webkit ## Best practices +Read the [best practices](https://playwright.dev/docs/best-practices) guide for Playwright. +

Forbid `$`, use `locator` instead

 @@ -45,26 +47,22 @@ In fact, any API that returns `ElementHandle` is [discouraged](https://playwrigh

Use accessible selectors

 -Use the selector engine [role-selector](https://playwright.dev/docs/selectors#role-selector) to construct the query wherever possible. It enables us to write accessible queries without having to rely on internal implementations. The syntax should be straightforward and looks like this: +Use [`getByRole`](https://playwright.dev/docs/locators#locate-by-role) to construct the query wherever possible. It enables us to write accessible queries without having to rely on internal implementations. ```js -// Select a button with the accessible name "Hello World" (case-insensitive). -page.locator( 'role=button[name="Hello World"i]' ); - -// Using short-form API, the `name` is case-insensitive by default. +// Select a button which includes the accessible name "Hello World" (case-insensitive). page.getByRole( 'button', { name: 'Hello World' } ); ``` -It's recommended to append `i` to the name attribute to match it case-insensitively wherever it makes sense. It can also be chained with built-in selector engines to perform complex queries: +It can also be chained to perform complex queries: ```js -// Select a button with a name ends with `Back` and is visible on the screen. -page.locator( 'role=button[name=/Back$/] >> visible=true' ); -// Select a button with the (exact) name "View options" under `#some-section`. -page.locator( 'css=#some-section >> role=button[name="View options"]' ); +// Select an option with a name "Buttons" under the "Block Library" region. +page.getByRole( 'region', { name: 'Block Library' } ) + .getByRole( 'option', { name: 'Buttons' } ) ``` -See the [official documentation](https://playwright.dev/docs/selectors#role-selector) for more info on how to use them. +See the [official documentation](https://playwright.dev/docs/locators) for more info on how to use them.
diff --git a/package-lock.json b/package-lock.json index 58914db037710..6fb9ece91f420 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7941,19 +7941,19 @@ } }, "@playwright/test": { - "version": "1.27.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.27.1.tgz", - "integrity": "sha512-mrL2q0an/7tVqniQQF6RBL2saskjljXzqNcCOVMUjRIgE6Y38nCNaP+Dc2FBW06bcpD3tqIws/HT9qiMHbNU0A==", + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.30.0.tgz", + "integrity": "sha512-SVxkQw1xvn/Wk/EvBnqWIq6NLo1AppwbYOjNLmyU0R1RoQ3rLEBtmjTnElcnz8VEtn11fptj1ECxK0tgURhajw==", "dev": true, "requires": { "@types/node": "*", - "playwright-core": "1.27.1" + "playwright-core": "1.30.0" }, "dependencies": { "playwright-core": { - "version": "1.27.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.27.1.tgz", - "integrity": "sha512-9EmeXDncC2Pmp/z+teoVYlvmPWUC6ejSSYZUln7YaP89Z6lpAaiaAnqroUt/BoLo8tn7WYShcfaCh+xofZa44Q==", + "version": "1.30.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.30.0.tgz", + "integrity": "sha512-7AnRmTCf+GVYhHbLJsGUtskWTE33SwMZkybJ0v6rqR1boxq2x36U7p1vDRV7HO2IwTZgmycracLxPEJI49wu4g==", "dev": true } } @@ -19363,7 +19363,7 @@ "app-root-dir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz", - "integrity": "sha1-OBh+wt6nV3//Az/8sSFyaS/24Rg=", + "integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==", "dev": true }, "app-root-path": { @@ -26021,7 +26021,7 @@ "array-ify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/array-ify/-/array-ify-1.0.0.tgz", - "integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==", + "integrity": "sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=", "dev": true }, "array-includes": { @@ -27656,7 +27656,7 @@ "babel-plugin-add-react-displayname": { "version": "0.0.5", "resolved": "https://registry.npmjs.org/babel-plugin-add-react-displayname/-/babel-plugin-add-react-displayname-0.0.5.tgz", - "integrity": "sha1-M51M3be2X9YtHfnbn+BN4TQSK9U=", + "integrity": "sha512-LY3+Y0XVDYcShHHorshrDbt4KFWL4bSeniCtl4SYZbask+Syngk1uMPCeN9+nSiZo6zX5s0RTq/J9Pnaaf/KHw==", "dev": true }, "babel-plugin-apply-mdx-type-prop": { @@ -28028,7 +28028,7 @@ "batch-processor": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/batch-processor/-/batch-processor-1.0.0.tgz", - "integrity": "sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=", + "integrity": "sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==", "dev": true }, "bcrypt-pbkdf": { @@ -31121,7 +31121,7 @@ "css.escape": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz", - "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==", + "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=", "dev": true }, "cssesc": { @@ -31345,7 +31345,7 @@ "debuglog": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz", - "integrity": "sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==", + "integrity": "sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=", "dev": true }, "decache": { @@ -36277,7 +36277,7 @@ "git-remote-origin-url": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/git-remote-origin-url/-/git-remote-origin-url-2.0.0.tgz", - "integrity": "sha512-eU+GGrZgccNJcsDH5LkXR3PB9M958hxc7sbA8DFJjrv9j4L2P/eZfKhM+QD6wyzpiv+b1BpK0XrYCxkovtjSLw==", + "integrity": "sha1-UoJlna4hBxRaERJhEq0yFuxfpl8=", "dev": true, "requires": { "gitconfiglocal": "^1.0.0", @@ -36324,7 +36324,7 @@ "gitconfiglocal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/gitconfiglocal/-/gitconfiglocal-1.0.0.tgz", - "integrity": "sha512-spLUXeTAVHxDtKsJc8FkFVgFtMdEN9qPGpL23VfSHx4fP4+Ds097IXLvymbnDH8FnmxX5Nr9bPw3A+AQ6mWEaQ==", + "integrity": "sha1-QdBF84UaXqiPA/JMocYXgRRGS5s=", "dev": true, "requires": { "ini": "^1.3.2" @@ -36363,7 +36363,7 @@ "is-glob": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz", - "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==", + "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=", "dev": true, "requires": { "is-extglob": "^2.1.0" @@ -36672,7 +36672,7 @@ "has-glob": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-glob/-/has-glob-1.0.0.tgz", - "integrity": "sha1-mqqe7b/7G6OZCnsAEPtnjuAIEgc=", + "integrity": "sha512-D+8A457fBShSEI3tFCj65PAbT++5sKiFtdCdOam0gnfBgw9D277OERk+HM9qYJXmdVLZ/znez10SqHN0BBQ50g==", "dev": true, "requires": { "is-glob": "^3.0.0" @@ -36681,7 +36681,7 @@ "is-glob": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz", - "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=", + "integrity": "sha512-UFpDDrPgM6qpnFNI+rh/p3bUaq9hKLZN8bMUWzxmcnZVS3omf4IPK+BrewlnWjO1WmUsMYuSjKh4UJuV4+Lqmw==", "dev": true, "requires": { "is-extglob": "^2.1.0" @@ -37526,7 +37526,7 @@ "humanize-ms": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", - "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==", + "integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=", "dev": true, "requires": { "ms": "^2.0.0" @@ -38543,7 +38543,7 @@ "is-text-path": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/is-text-path/-/is-text-path-1.0.1.tgz", - "integrity": "sha512-xFuJpne9oFz5qDaodwmmG08e3CawH/2ZV8Qqza1Ko7Sk8POWbkRdwIoAWVhqvq0XeUzANEhKo2n0IXUGBm7A/w==", + "integrity": "sha1-Thqg+1G/vLPpJogAE5cgLBd1tm4=", "dev": true, "requires": { "text-extensions": "^1.0.0" @@ -38855,7 +38855,7 @@ "is-window": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/is-window/-/is-window-1.0.2.tgz", - "integrity": "sha1-LIlspT25feRdPDMTOmXYyfVjSA0=", + "integrity": "sha512-uj00kdXyZb9t9RcAUAwMZAnkBUwdYGhYlt7djMXhfyhUCzwNba50tIiBKR7q0l7tdoBtFVw/3JmLY6fI3rmZmg==", "dev": true }, "is-windows": { @@ -42255,7 +42255,7 @@ "js-string-escape": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/js-string-escape/-/js-string-escape-1.0.1.tgz", - "integrity": "sha1-4mJbrbwNZ8dTPp7cEGjFh65BN+8=", + "integrity": "sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==", "dev": true }, "js-tokens": { @@ -42646,7 +42646,7 @@ "jsonparse": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz", - "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==", + "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=", "dev": true }, "jsprim": { @@ -43727,7 +43727,7 @@ "lodash.ismatch": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz", - "integrity": "sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==", + "integrity": "sha1-dWy1FQyjum8RCFp4hJZF8Yj4Xzc=", "dev": true }, "lodash.isplainobject": { @@ -43986,7 +43986,7 @@ "lz-string": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.4.4.tgz", - "integrity": "sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==", + "integrity": "sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=", "dev": true }, "macos-release": { @@ -47293,7 +47293,7 @@ "num2fraction": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", - "integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=", + "integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==", "dev": true }, "number-is-nan": { @@ -48761,7 +48761,7 @@ "p-defer": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz", - "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=", + "integrity": "sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==", "dev": true }, "p-event": { @@ -50317,7 +50317,7 @@ "pretty-hrtime": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", - "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=", + "integrity": "sha512-66hKPCr+72mlfiSjlEB1+45IjXSqvVAIy6mocupoww4tBFE9R9IhwwUGoI4G++Tc9Aq+2rxOt0RFU6gPcrte0A==", "dev": true }, "private": { @@ -50876,7 +50876,7 @@ "promzard": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/promzard/-/promzard-0.3.0.tgz", - "integrity": "sha512-JZeYqd7UAcHCwI+sTOeUDYkvEU+1bQ7iE0UT1MgB/tERkAPkesW46MrpIySzODi+owTjZtiF8Ay5j9m60KmMBw==", + "integrity": "sha1-JqXW7ox97kyxIggwWs+5O6OCqe4=", "dev": true, "requires": { "read": "1" @@ -50910,7 +50910,7 @@ "proto-list": { "version": "1.2.4", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", - "integrity": "sha512-vtK/94akxsTMhe0/cbfpR+syPuszcuwhqVjJq26CuNDgFGj682oRBXOP5MJpv2r7JtE8MsiepGIqvvOTBwn2vA==", + "integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=", "dev": true }, "protocols": { @@ -52255,7 +52255,7 @@ "read": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", - "integrity": "sha512-rSOKNYUmaxy0om1BNjMN4ezNT6VKK+2xF4GBhc81mkH7L60i6dp8qPYrkndNLT3QPphoII3maL9PVC9XmhHwVQ==", + "integrity": "sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=", "dev": true, "requires": { "mute-stream": "~0.0.4" @@ -52814,7 +52814,7 @@ "relateurl": { "version": "0.2.7", "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz", - "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=", + "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==", "dev": true }, "remark": { @@ -57875,7 +57875,7 @@ "temp-dir": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz", - "integrity": "sha512-xZFXEGbG7SNC3itwBzI3RYjq/cEhBkx2hJuKGIUOcEULmkQExXiHat2z/qkISYsuR+IKumhEfKKbV5qXmhICFQ==", + "integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=", "dev": true }, "terminal-link": { diff --git a/package.json b/package.json index d49bb29104aec..aaf16e907f13e 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "@octokit/rest": "16.26.0", "@octokit/types": "6.34.0", "@octokit/webhooks-types": "5.6.0", - "@playwright/test": "1.27.1", + "@playwright/test": "1.30.0", "@pmmmwh/react-refresh-webpack-plugin": "0.5.2", "@storybook/addon-a11y": "6.5.7", "@storybook/addon-actions": "6.5.7", diff --git a/packages/e2e-test-utils-playwright/src/test.ts b/packages/e2e-test-utils-playwright/src/test.ts index b26117ff077ff..a277afa1cd13d 100644 --- a/packages/e2e-test-utils-playwright/src/test.ts +++ b/packages/e2e-test-utils-playwright/src/test.ts @@ -151,24 +151,6 @@ const test = base.extend< }, { scope: 'worker', auto: true }, ], - // An automatic fixture to configure snapshot settings globally. - snapshotConfig: [ - async ( {}, use, testInfo ) => { - // A work-around to remove the default snapshot suffix. - // See https://github.com/microsoft/playwright/issues/11134 - testInfo.snapshotSuffix = ''; - // Normalize snapshots into the same `__snapshots__` folder to minimize - // the file name length on Windows. - // See https://github.com/WordPress/gutenberg/issues/40291 - testInfo.snapshotDir = path.join( - path.dirname( testInfo.file ), - '__snapshots__' - ); - - await use(); - }, - { auto: true }, - ], } ); export { test, expect }; diff --git a/test/e2e/playwright.config.ts b/test/e2e/playwright.config.ts index 8796de6fdb28b..e1724a61d6126 100644 --- a/test/e2e/playwright.config.ts +++ b/test/e2e/playwright.config.ts @@ -4,14 +4,13 @@ import os from 'os'; import path from 'path'; import { fileURLToPath } from 'url'; -import { devices } from '@playwright/test'; -import type { PlaywrightTestConfig } from '@playwright/test'; +import { defineConfig, devices } from '@playwright/test'; const STORAGE_STATE_PATH = process.env.STORAGE_STATE_PATH || path.join( process.cwd(), 'artifacts/storage-states/admin.json' ); -const config: PlaywrightTestConfig = { +const config = defineConfig( { reporter: process.env.CI ? [ [ 'github' ], [ './config/flaky-tests-reporter.ts' ] ] : 'list', @@ -23,6 +22,8 @@ const config: PlaywrightTestConfig = { reportSlowTests: null, testDir: fileURLToPath( new URL( './specs', 'file:' + __filename ).href ), outputDir: path.join( process.cwd(), 'artifacts/test-results' ), + snapshotPathTemplate: + '{testDir}/{testFileDir}/__snapshots__/{arg}-{projectName}{ext}', globalSetup: fileURLToPath( new URL( './config/global-setup.ts', 'file:' + __filename ).href ), @@ -81,6 +82,6 @@ const config: PlaywrightTestConfig = { grepInvert: /-firefox/, }, ], -}; +} ); export default config; diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-changing-aspect-ratio-using-the-crop-tools-1-chromium.png b/test/e2e/specs/editor/blocks/__snapshots__/Image-allows-changing-aspect-ratio-using-the-crop-tools-1-chromium.png new file mode 100644 index 0000000000000000000000000000000000000000..b488fe1a7e4833ecb2f63a9ae26dc4b79ee303fe GIT binary patch literal 270 zcmeAS@N?(olHy`uVBq!ia0vp^AT}EZ3y=)>dE6IBv7|ftIx;Y9?C1WI$O_~uBzpt_ z#jDg97#dm_7=8hT8eT9klo~KFyh>nTu$sZZAYL$MSD+10f+@+{-G$+Qd;gjJKpuOE zr>`sfb0$7kMaz!czfJ;$#5`RbLpZJ{r~Ek2z*=yOS&dDnL9B_vFNo=tll;FBpbFIz z*NBpo#FA92CkWnhs0lr!lvI6-E$sR$z z3=CCj3=9n|3=F@3LJcn%7)lKo7+xhXFj&oCU=S~uvn$XBD8ZEE?e4Jb0VJq zzPTO#&I?qjTH+c}l9E`GYL#4+3Zxi}42+C*4UBXRO+pMzt&B~q49v9+46FNL6Qo|9znhg z3{`3j3=J&|48MRv4KElNN(~qoUL`OvSj}Ky5HFasE6@fg!Ib3f?!v%$w@Y{lkjGx) z>Fdh=oQaQBRG`p#BFHu#PZ!4!j_b)A5*nNsSeqCnR|$oN0L4{HTq8|2o1UUDVb@NxHW`#?s*5)z~JfX K=d#Wzp$Py`5 { // Assert that the image is initially unscaled and unedited. const initialImageSrc = await image.getAttribute( 'src' ); - const initialImageDataURL = await imageBlockUtils.getDataURL( image ); + await expect + .poll( () => image.boundingBox() ) + .toMatchObject( { + height: 10, + width: 10, + } ); // Zoom in to twice the amount using the zoom input. await editor.clickBlockToolbarButton( 'Crop' ); @@ -340,11 +346,15 @@ test.describe( 'Image', () => { const updatedImageSrc = await image.getAttribute( 'src' ); expect( initialImageSrc ).not.toEqual( updatedImageSrc ); - const updatedImageDataURL = await imageBlockUtils.getDataURL( image ); - expect( initialImageDataURL ).not.toEqual( updatedImageDataURL ); + await expect + .poll( () => image.boundingBox() ) + .toMatchObject( { + height: 5, + width: 5, + } ); expect( - snapshotDiff( initialImageDataURL, updatedImageDataURL ) + await imageBlockUtils.getImageBuffer( updatedImageSrc ) ).toMatchSnapshot(); } ); @@ -369,7 +379,12 @@ test.describe( 'Image', () => { // Assert that the image is initially unscaled and unedited. const initialImageSrc = await image.getAttribute( 'src' ); - const initialImageDataURL = await imageBlockUtils.getDataURL( image ); + await expect + .poll( () => image.boundingBox() ) + .toMatchObject( { + height: 10, + width: 10, + } ); // Zoom in to twice the amount using the zoom input. await editor.clickBlockToolbarButton( 'Crop' ); @@ -386,13 +401,17 @@ test.describe( 'Image', () => { // Assert that the image is edited. const updatedImageSrc = await image.getAttribute( 'src' ); - const updatedImageDataURL = await imageBlockUtils.getDataURL( image ); + expect( updatedImageSrc ).not.toEqual( initialImageSrc ); - expect( initialImageSrc ).not.toEqual( updatedImageSrc ); - expect( initialImageDataURL ).not.toEqual( updatedImageDataURL ); + await expect + .poll( () => image.boundingBox() ) + .toMatchObject( { + height: 6, + width: 10, + } ); expect( - snapshotDiff( initialImageDataURL, updatedImageDataURL ) + await imageBlockUtils.getImageBuffer( updatedImageSrc ) ).toMatchSnapshot(); } ); @@ -415,9 +434,6 @@ test.describe( 'Image', () => { await expect( image ).toHaveAttribute( 'src', new RegExp( filename ) ); - // Assert that the image is initially unscaled and unedited. - const initialImageDataURL = await imageBlockUtils.getDataURL( image ); - // Rotate the image. await editor.clickBlockToolbarButton( 'Crop' ); await editor.clickBlockToolbarButton( 'Rotate' ); @@ -429,14 +445,10 @@ test.describe( 'Image', () => { ).toBeHidden(); // Assert that the image is edited. - await expect - .poll( async () => imageBlockUtils.getDataURL( image ) ) - .not.toBe( initialImageDataURL ); - - const updatedImageDataURL = await imageBlockUtils.getDataURL( image ); + const updatedImageSrc = await image.getAttribute( 'src' ); expect( - snapshotDiff( initialImageDataURL, updatedImageDataURL ) + await imageBlockUtils.getImageBuffer( updatedImageSrc ) ).toMatchSnapshot(); } ); @@ -530,6 +542,7 @@ test.describe( 'Image', () => { class ImageBlockUtils { constructor( { page } ) { + /** @type {Page} */ this.page = page; this.TEST_IMAGE_FILE_PATH = path.join( @@ -555,14 +568,40 @@ class ImageBlockUtils { return filename; } - async getDataURL( element ) { + async getImageBuffer( url ) { + const response = await this.page.request.get( url ); + return await response.body(); + } + + async getHexString( element ) { return element.evaluate( ( node ) => { const canvas = document.createElement( 'canvas' ); - const context = canvas.getContext( '2d' ); canvas.width = node.width; canvas.height = node.height; + + const context = canvas.getContext( '2d' ); context.drawImage( node, 0, 0 ); - return canvas.toDataURL( 'image/jpeg' ); + const imageData = context.getImageData( + 0, + 0, + canvas.width, + canvas.height + ); + const pixels = imageData.data; + + let hexString = ''; + for ( let i = 0; i < pixels.length; i += 4 ) { + if ( i !== 0 && i % ( canvas.width * 4 ) === 0 ) { + hexString += '\n'; + } + + const r = pixels[ i ].toString( 16 ).padStart( 2, '0' ); + const g = pixels[ i + 1 ].toString( 16 ).padStart( 2, '0' ); + const b = pixels[ i + 2 ].toString( 16 ).padStart( 2, '0' ); + const a = pixels[ i + 3 ].toString( 16 ).padStart( 2, '0' ); + hexString += '#' + r + g + b + a; + } + return hexString; } ); } } diff --git a/test/e2e/specs/editor/blocks/list.spec.js b/test/e2e/specs/editor/blocks/list.spec.js index 0a1159f6d5d49..505f077918a97 100644 --- a/test/e2e/specs/editor/blocks/list.spec.js +++ b/test/e2e/specs/editor/blocks/list.spec.js @@ -1247,7 +1247,7 @@ test.describe( 'List', () => { page.locator( 'role=document[name="Block: List"i]' ) ); - await page.getByRole( 'button', { name: 'List' } ).click(); + await page.getByRole( 'button', { name: 'List', exact: true } ).click(); await page.getByRole( 'menuitem', { name: 'Paragraph' } ).click(); expect( await editor.getEditedPostContent() ).toMatchSnapshot();