Add E2E tests setup for Auto Sizes

.gitignore

@@ -3,6 +3,8 @@
 ############
 
 plugins/*/tests/**/actual.html
+artifacts
+test-results
 
 ############
 ## IDEs

package.json

@@ -12,6 +12,8 @@
   },
   "devDependencies": {
     "@octokit/rest": "^21.1.1",
+    "@playwright/test": "^1.51.1",
+    "@wordpress/e2e-test-utils-playwright": "^1.21.0",
     "@wordpress/env": "^10.22.0",
     "@wordpress/prettier-config": "^4.20.0",
     "@wordpress/scripts": "^30.15.0",
@@ -51,6 +53,8 @@
     "tsc": "tsc",
     "format-php": "composer format:all",
     "phpstan": "composer phpstan",
+    "test-e2e": "wp-scripts test-playwright --config plugins/auto-sizes/tests/e2e/playwright.config.ts",
+    "test-e2e:debug": "wp-scripts test-playwright --config plugins/auto-sizes/tests/e2e/playwright.config.ts --ui",
     "lint-php": "composer lint:all",
     "test-php": "wp-env run tests-cli --env-cwd=/var/www/html/wp-content/plugins/performance composer test:plugins",
     "test-php-watch": "./bin/test-php-watch.sh",

plugins/auto-sizes/tests/e2e/config/global-setup.ts

@@ -0,0 +1,39 @@
+/**
+ * External dependencies
+ */
+import { request } from '@playwright/test';
+import type { FullConfig } from '@playwright/test';
+
+/**
+ * WordPress dependencies
+ */
+import { RequestUtils } from '@wordpress/e2e-test-utils-playwright';
+
+async function globalSetup( config: FullConfig ) {
+	const { storageState, baseURL } = config.projects[ 0 ].use;
+	const storageStatePath =
+		typeof storageState === 'string' ? storageState : undefined;
+
+	const requestContext = await request.newContext( {
+		baseURL,
+	} );
+
+	const requestUtils = new RequestUtils( requestContext, {
+		storageStatePath,
+	} );
+
+	// Authenticate and save the storageState to disk.
+	await requestUtils.setupRest();
+
+	// Reset the test environment before running the tests.
+	await Promise.all( [
+		requestUtils.activateTheme( 'twentytwentyfour' ),
+		requestUtils.deleteAllPosts(),
+		requestUtils.deleteAllBlocks(),
+		requestUtils.resetPreferences(),
+	] );
+
+	await requestContext.dispose();
+}
+
+export default globalSetup;

plugins/auto-sizes/tests/e2e/playwright.config.ts

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import * as os from 'os';
+import { fileURLToPath } from 'url';
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * WordPress dependencies
+ */
+import baseConfig from '@wordpress/scripts/config/playwright.config.js';
+
+const config = defineConfig( {
+	...baseConfig,
+	workers: 1,
+	globalSetup: fileURLToPath(
+		new URL( './config/global-setup.ts', 'file:' + __filename ).href
+	),
+	projects: [
+		{
+			name: 'chromium',
+			use: { ...devices[ 'Desktop Chrome' ] },
+			grepInvert: /-chromium/,
+		},
+		{
+			name: 'webkit',
+			use: {
+				...devices[ 'Desktop Safari' ],
+				/**
+				 * Headless webkit won't receive dataTransfer with custom types in the
+				 * drop event on Linux. The solution is to use `xvfb-run` to run the tests.
+				 * ```sh
+				 * xvfb-run npm run test:e2e
+				 * ```
+				 * See `.github/workflows/end2end-test-playwright.yml` for advanced usages.
+				 */
+				headless: os.type() !== 'Linux',
+			},
+			grep: /@webkit/,
+			grepInvert: /-webkit/,
+		},
+		{
+			name: 'firefox',
+			use: { ...devices[ 'Desktop Firefox' ] },
+			grep: /@firefox/,
+			grepInvert: /-firefox/,
+		},
+	],
+} );
+
+export default config;

plugins/auto-sizes/tests/e2e/specs/accurate-sizes.spec.js

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+
+/**
+ * WordPress dependencies
+ */
+const { test } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'changing image size', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activateTheme( 'twentytwentyfour' );
+		await requestUtils.deactivatePlugin( 'enhanced-responsive-images' );
+		await requestUtils.deleteAllMedia();
+	} );
+
+	test.afterEach( async ( { requestUtils } ) => {
+		await requestUtils.deleteAllMedia();
+	} );
+
+	test( 'should insert and check image size on front end', async ( {
+		admin,
+		editor,
+		requestUtils,
+		page,
+	} ) => {
+		const filename = 'leaves.jpg';
+		const filepath = path.join(
+			__dirname + '/../../data/images/',
+			filename
+		);
+
+		await admin.createNewPost();
+		const media = await requestUtils.uploadMedia( filepath );
+
+		await editor.insertBlock( {
+			name: 'core/group',
+			attributes: {
+				align: 'wide',
+			},
+			innerBlocks: [
+				{
+					name: 'core/image',
+					attributes: {
+						alt: filename,
+						id: media.id,
+						url: media.source_url,
+					},
+				},
+			],
+		} );
+
+		const postId = await editor.publishPost();
+
+		// Navigate to the post and wait for the image to load.
+		await page.goto( `/?p=${ postId }` );
+		const imageElement = await page.waitForSelector(
+			`img.wp-image-${ media.id }`
+		);
+		const imageUrl = await imageElement.getAttribute( 'src' );
+		/* eslint-disable no-console */
+		console.log( imageUrl );
+		/* eslint-enable no-console */
+
+		// Activate the plugin.
+		await requestUtils.activatePlugin( 'enhanced-responsive-images' );
+
+		// Reload the page and wait for the image to load.
+		await page.goto( `/?p=${ postId }` );
+		const imageElements = await page.waitForSelector(
+			`img.wp-image-${ media.id }`
+		);
+		const newImageUrl = await imageElements.getAttribute( 'src' );
+		/* eslint-disable no-console */
+		console.log( newImageUrl );
+		/* eslint-enable no-console */
+	} );
+} );