Add E2E tests setup for Auto Sizes

.github/workflows/e2e-test.yml

@@ -0,0 +1,59 @@
+name: End-to-End Tests
+
+on:
+  push:
+    branches:
+      - trunk
+      - 'release/**'
+      - 'add/setup-e2e-tests'
+    paths:
+      - '.github/workflows/e2e-test.yml'
+      - 'plugins/auto-sizes/**'
+      - '**/package.json'
+      - 'package-lock.json'
+      - 'composer.json'
+      - 'composer.lock'
+  pull_request:
+    paths:
+      - '.github/workflows/e2e-test.yml'
+      - 'plugins/auto-sizes/**'
+      - '**/package.json'
+      - 'package-lock.json'
+      - 'composer.json'
+      - 'composer.lock'
+    types:
+      - opened
+      - reopened
+      - synchronize
+
+jobs:
+  e2e-test:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js (.nvmrc)
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: '.nvmrc'
+          cache: npm
+
+      - name: Install npm dependencies
+        run: npm ci
+
+      - name: Build assets
+        run: npm run build
+
+      - name: Install Playwright dependencies
+        run: npx playwright install chromium --with-deps
+
+      - name: Install WordPress
+        run: npm run wp-env start
+
+      - name: Run tests
+        env:
+          PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
+        run: npm run test-e2e

.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/improve-calculate-sizes.spec.js

@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+
+/**
+ * WordPress dependencies
+ */
+const { test } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'check accurate sizes', () => {
+	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 get smaller version of image', 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 imageSizes = await imageElement.getAttribute( 'sizes' );
+
+		// 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 updatedImageElement = await page.waitForSelector(
+			`img.wp-image-${ media.id }`
+		);
+
+		const updatedImageSizes =
+			await updatedImageElement.getAttribute( 'sizes' );
+
+		if ( imageSizes === updatedImageSizes ) {
+			throw new Error(
+				'Image sizes did not update after activating the plugin.'
+			);
+		}
+
+		if ( '(max-width: 620px) 100vw, 620px' !== updatedImageSizes ) {
+			throw new Error(
+				`Unexpected image sizes: ${ updatedImageSizes }. Expected: (max-width: 620px) 100vw, 620px`
+			);
+		}
+
+		const currentSrc = await updatedImageElement.evaluate( ( img ) =>
+			img instanceof HTMLImageElement ? img.currentSrc : null
+		);
+		currentSrc.endsWith( 'leaves-768x512.jpg' );
+	} );
+} );