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,9 @@
     "tsc": "tsc",
     "format-php": "composer format:all",
     "phpstan": "composer phpstan",
+    "test-e2e": "wp-scripts test-playwright --config tools/e2e/playwright.config.ts",
+    "test-e2e:debug": "wp-scripts test-playwright --config tools/e2e/playwright.config.ts --ui",
+    "test-e2e:auto-sizes": "wp-scripts test-playwright --config tools/e2e/playwright.config.ts --project=auto-sizes",
     "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/specs/improve-calculate-sizes.spec.js

@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+const path = require( 'path' );
+
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = 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.deactivatePlugin( 'modern-image-formats' );
+		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.getByAltText( filename );
+		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.getByAltText( filename );
+
+		const updatedImageSizes =
+			await updatedImageElement.getAttribute( 'sizes' );
+
+		expect( imageSizes ).not.toStrictEqual( updatedImageSizes );
+
+		expect( updatedImageSizes ).toStrictEqual(
+			'(max-width: 620px) 100vw, 620px'
+		);
+
+		const currentSrc = await updatedImageElement.evaluate( ( img ) =>
+			img instanceof HTMLImageElement ? img.currentSrc : null
+		);
+		await expect( currentSrc ).toContain( 'leaves-768x512.jpg' );
+	} );
+} );

tools/e2e/playwright.config.ts

@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { defineConfig } from '@playwright/test';
+
+/**
+ * WordPress dependencies
+ */
+import baseConfig from '@wordpress/scripts/config/playwright.config.js';
+
+const config = defineConfig( {
+	...baseConfig,
+	projects: [
+		{
+			name: 'auto-sizes',
+			testDir: '../../plugins/auto-sizes/tests/e2e/specs',
+		},
+	],
+} );
+
+export default config;

tsconfig.json

@@ -11,6 +11,7 @@
   "include": [
     "plugins/**/*.js",
     "plugins/**/*.ts",
+    "tools/**/*.ts",
   ],
   "exclude": [
     "plugins/*/build/*"