Use Playwright for Browser testing

.github/workflows/browser-tests.yml

@@ -36,8 +36,18 @@ jobs:
                         src/**/package.json
             -   run: pnpm install --frozen-lockfile
 
-            -   name: Install browsers
+            -   name: Install custom browsers
                 run: node ./bin/get_browsers.mjs
 
+            -   name: Install browsers with Playwright
+                run: pnpm exec playwright install firefox ffmpeg
+
             # TODO: Install the E2E app + run webserver
             -   run: pnpm run test:browser
+
+            - uses: actions/upload-artifact@v4
+              if: ${{ !cancelled() }}
+              with:
+                  name: playwright-report
+                  path: .playwright-report/
+                  retention-days: 7

.gitignore

@@ -8,3 +8,5 @@ node_modules
 /vendor
 
 /browsers
+.last-run.json
+.playwright-report/

bin/get_browsers.mjs

@@ -3,7 +3,7 @@ import {
     Browser,
     BrowserTag,
     detectBrowserPlatform,
-    install as installBrowser,
+    install,
     resolveBuildId,
 } from '@puppeteer/browsers';
 
@@ -18,7 +18,7 @@ const installBrowserCommonOpts = {
 // see https://browsersl.ist/#q=defaults+and+fully+supports+es6-module
 
 export const browsers = {
-    'chrome@lowest': await installBrowser({
+    'chrome@lowest': await install({
         ...installBrowserCommonOpts,
         browser: Browser.CHROME,
         // The lowest version where:
@@ -28,21 +28,29 @@ export const browsers = {
         // @see https://raw.githubusercontent.com/GoogleChromeLabs/chrome-for-testing/refs/heads/main/data/known-good-versions-with-downloads.json
         buildId: '130.0.6669.0',
     }),
-    'chrome@latest': await installBrowser({
-        ...installBrowserCommonOpts,
-        browser: Browser.CHROME,
-        buildId: await resolveBuildId(Browser.CHROME, platform, BrowserTag.STABLE),
-    }),
-    'firefox@lowest': await installBrowser({
-        ...installBrowserCommonOpts,
-        browser: Browser.FIREFOX,
-        buildId: 'stable_128.0',
-    }),
-    'firefox@latest': await installBrowser({
-        ...installBrowserCommonOpts,
-        browser: Browser.FIREFOX,
-        buildId: await resolveBuildId(Browser.FIREFOX, platform, BrowserTag.STABLE),
+
+    'chrome@latest': await install({
+       ...installBrowserCommonOpts,
+       browser: Browser.CHROME,
+       buildId: await resolveBuildId(Browser.CHROME, platform, BrowserTag.STABLE),
     }),
+
+    // TODO: I don't find a way to install a specific Firefox version and make it usable
+    // with Playwright. It's surely related to patch things (https://playwright.dev/docs/browsers#firefox),
+    // but even a non-branded version like Nightly doesn't work.
+
+    // 'firefox@lowest': await install({
+    //     ...installBrowserCommonOpts,
+    //     browser: Browser.FIREFOX,
+    //     buildId: '128.0a1',
+    //     baseUrl: 'https://ftp.mozilla.org/pub/firefox/nightly/2024/06/2024-06-01-09-33-40-mozilla-central'
+    // }),
+    //
+    // 'firefox@latest': await install({
+    //     ...installBrowserCommonOpts,
+    //     browser: Browser.FIREFOX,
+    //     buildId: await resolveBuildId(Browser.FIREFOX, platform, BrowserTag.NIGHTLY),
+    // }),
 };
 
 if (import.meta.main) {

bin/test_package.sh

@@ -9,32 +9,45 @@ PROJECT_DIR=$(dirname "$SCRIPT_DIR")
 # Flag to track if any test fails
 all_tests_passed=true
 
-# Check if we have enough arguments
+# Check if we have at least two arguments
 if [ $# -ne 2 ]; then
     echo "No arguments supplied, please provide the package's path and the test type (e.g. --unit or --browser)"
+    echo "Usage: $0 <package_path> <test_type> [args...]"
 fi
 
+location="$(realpath "$PWD/$1")"
+if [ ! -d "$location" ]; then
+    echo "The provided package path does not exist or is not a directory: $location"
+    exit 1
+fi
+
+shift
+case "$1" in
+  --unit) testType="unit" ;;
+  --browser) testType="browser" ;;
+  *) echo "Unknown test type: $2. Please use --unit or --browser."; exit 1 ;;
+esac
+
+shift
+args=("$@")
+
 # Check if jq is installed
 if ! command -v jq &> /dev/null; then
     echo "jq is required but not installed. Aborting."
     exit 1
 fi
 
 runTestSuite() {
-    local testProject="$1"
-    if [ "$testProject" != "unit" ] && [ "$testProject" != "browser" ]; then
-        echo "Unknown test project: $testProject. Please use 'unit' or 'browser'."
-        exit 1
+    if [ "$testType" == "unit" ]; then
+      echo -e "🧪  Running unit tests for $workspace...\n"
+      pnpm exec vitest --run "${args[@]}" || { all_tests_passed=false; }
+    elif [ "$testType" == "browser" ]; then
+      echo -e "🧪  Running browser tests for $workspace...\n"
+      # TODO: to implement
     fi
-
-    echo -e "🧪  Running $testProject tests for $workspace...\n"
-    pnpm exec vitest --run --config "vitest.config.$testProject.mjs" || { all_tests_passed=false; }
 }
 
 processWorkspace() {
-    local location="$1"
-    local testProject="$2"
-
     if [ ! -d "$location" ]; then
         echo "⚠ No directory found at $location"
         return
@@ -89,7 +102,7 @@ processWorkspace() {
                     echo -e "  - Install $library@$trimmed_version for $workspace\n"
                     pnpm add "$library@$trimmed_version" --save-peer --filter "$workspace"
 
-                    runTestSuite "$testProject"
+                    runTestSuite
                 fi
             done
         done
@@ -98,17 +111,11 @@ processWorkspace() {
         git checkout -- "$package_json_path" "$PROJECT_DIR/pnpm-lock.yaml"
     else
         echo -e " -> No peerDependencies found with multiple versions defined\n"
-        runTestSuite "$testProject"
+        runTestSuite
     fi
 }
 
-case "$2" in
-  --unit) testProject="unit" ;;
-  --browser) testProject="browser" ;;
-  *) echo "Unknown test type: $2. Please use --unit or --browser."; exit 1 ;;
-esac
-
-processWorkspace "$(realpath "$PWD/$1")" "$testProject"
+processWorkspace
 
 # Check the flag at the end and exit with code 1 if any test failed
 if [ "$all_tests_passed" = false ]; then

package.json

@@ -10,12 +10,13 @@
         "build": "pnpm run --filter @symfony/ux-map build && pnpm run -r --aggregate-output build",
         "test": "pnpm run -r --workspace-concurrency=1 test",
         "test:unit": "pnpm run -r --aggregate-output test:unit",
-        "test:browser": "pnpm run -r --workspace-concurrency=1 test:browser",
+        "test:browser": "pnpm exec playwright test",
         "check": "biome check",
         "ci": "biome ci"
     },
     "devDependencies": {
         "@biomejs/biome": "^2.0.4",
+        "@playwright/test": "^1.54.2",
         "@puppeteer/browsers": "^2.10.6",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",

playwright.config.ts

@@ -0,0 +1,76 @@
+import { defineConfig, devices } from '@playwright/test';
+
+import { browsers } from './bin/get_browsers.mjs';
+
+export default defineConfig({
+    testMatch:[
+        'src/**/assets/test/browser/**/*.{test,spec}.ts',
+        'src/**/assets/test/**/*.browser.{test,spec}.ts',
+    ],
+    testIgnore: [
+        // TODO: Temporary, as the Map tests require some TypeScript code to be compiled
+        // and so fails (which is expected). To remove once the tests are real E2E.
+        /Map/
+    ],
+
+    reporter: [
+        ['list'],
+        ['html', { open: process.env.CI ? 'never' : 'on-failure', outputFolder: '.playwright-report' }],
+    ],
+
+    use: {
+        // Base URL to use in actions like `await page.goto('/')`.
+        baseURL: 'http://localhost:9876',
+
+        screenshot: 'only-on-failure',
+        video: 'retain-on-failure',
+        trace: 'retain-on-failure'
+    },
+
+    //webServer: {
+    //    command: 'cd test_apps/e2e-app && symfony serve',
+    //    url: 'http://localhost:9876',
+    //    reuseExistingServer: !process.env.CI,
+    //    stderr: 'pipe',
+    //},
+
+    projects: [
+        {
+            name: 'chrome-lowest',
+            use: {
+                ...devices['Desktop Chrome'],
+                channel: 'chrome',
+                launchOptions: {
+                    executablePath: browsers['chrome@lowest'].executablePath,
+                }
+            },
+        },
+        {
+            name: 'chrome-latest',
+            use: {
+                ...devices['Desktop Chrome'],
+                channel: 'chrome',
+                launchOptions: {
+                    executablePath: browsers['chrome@latest'].executablePath,
+                }
+            },
+        },
+
+        // TODO: Until we found a way to run a specific version of Firefox
+        //{
+        //    name: 'firefox-lowest',
+        //    use: {
+        //        ...devices['Desktop Firefox'],
+        //        launchOptions: {
+        //            executablePath: browsers['firefox@lowest'].executablePath,
+        //        }
+        //    },
+        //},
+        {
+            name: 'firefox-latest',
+            use: {
+                ...devices['Desktop Firefox'],
+            },
+        }
+    ],
+});

src/Autocomplete/assets/test/browser/placeholder.test.ts

@@ -1,7 +1,11 @@
-import { describe, expect, it } from 'vitest';
+import { expect, test } from '@playwright/test';
 
-describe('Placeholder', () => {
-    it('pass', () => {
-        expect(true).toBe(true);
-    });
+test('get started link', async ({ page }) => {
+    await page.goto('https://playwright.dev/');
+
+    // Click the get started link.
+    await page.getByRole('link', { name: 'Get started' }).click();
+
+    // Expects page to have a heading with the name of Installation.
+    await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
 });

src/Autocomplete/assets/vitest.config.unit.mjs → src/Autocomplete/assets/vitest.config.mjs

@@ -1,4 +1,4 @@
 import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
+import configShared from '../../../vitest.config.mjs';
 
 export default mergeConfig(configShared, {});

src/Chartjs/assets/test/browser/placeholder.test.ts

@@ -1,7 +1,11 @@
-import { describe, expect, it } from 'vitest';
+import { expect, test } from '@playwright/test';
 
-describe('Placeholder', () => {
-    it('pass', () => {
-        expect(true).toBe(true);
-    });
+test('get started link', async ({ page }) => {
+    await page.goto('https://playwright.dev/');
+
+    // Click the get started link.
+    await page.getByRole('link', { name: 'Get started' }).click();
+
+    // Expects page to have a heading with the name of Installation.
+    await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
 });

src/Chartjs/assets/vitest.config.unit.mjs → src/Chartjs/assets/vitest.config.mjs

@@ -1,6 +1,6 @@
 import path from 'node:path';
 import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
+import configShared from '../../../vitest.config.mjs';
 
 export default mergeConfig(configShared, {
     test: {

src/Cropperjs/assets/test/browser/placeholder.test.ts

@@ -1,7 +1,11 @@
-import { describe, expect, it } from 'vitest';
+import { expect, test } from '@playwright/test';
 
-describe('Placeholder', () => {
-    it('pass', () => {
-        expect(true).toBe(true);
-    });
+test('get started link', async ({ page }) => {
+    await page.goto('https://playwright.dev/');
+
+    // Click the get started link.
+    await page.getByRole('link', { name: 'Get started' }).click();
+
+    // Expects page to have a heading with the name of Installation.
+    await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
 });

src/LazyImage/assets/vitest.config.unit.mjs → src/Cropperjs/assets/vitest.config.mjs

@@ -1,4 +1,4 @@
 import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
+import configShared from '../../../vitest.config.mjs';
 
 export default mergeConfig(configShared, {});