minor #3014 Create E2E app for browsers tests (Kocal)

This PR was merged into the 2.x branch.

Discussion
----------

 Create E2E app for browsers tests

| Q             | A
| ------------- | ---
| Bug fix?      | no
| New feature?  | no <!-- please update src/**/CHANGELOG.md files -->
| Docs?         | no <!-- required for new features -->
| Issues        | Fix #3009 <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead -->
| License       | MIT

<!--
Replace this notice by a description of your feature/bugfix.
This will help reviewers and should be a good start for the documentation.

Additionally (see https://symfony.com/releases):
 - Always add tests and ensure they pass.
 - For new features, provide some code snippets to help understand usage.
 - Features and deprecations must be submitted against branch main.
 - Update/add documentation as required (we can help!)
 - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry
 - Never break backward compatibility (see https://symfony.com/bc).
-->

This pull request updates the browser testing workflow and related configuration to improve reliability, consistency, and maintainability across UX packages. The main changes include refactoring the browser test workflow to use a matrix strategy for Symfony versions, standardizing dependency installation steps, removing unused dependencies, and renaming the Playwright configuration for easier reuse.

**Workflow and CI improvements:**

* Refactored `.github/workflows/browser-tests.yml` to use a matrix strategy for Symfony versions, added concurrency controls to cancel in-progress runs, and split setup steps for JS and PHP dependencies, Docker containers, and E2E app configuration. Artifact uploads now only occur on browser test failures. [[1]](diffhunk://#diff-255cac5fcd7ae015d5bc1ccf14bfa2fff33bcabb653402be014e6668db1036ceR23-R38) [[2]](diffhunk://#diff-255cac5fcd7ae015d5bc1ccf14bfa2fff33bcabb653402be014e6668db1036ceL36-R116)
* Standardized JS dependency installation across workflows by replacing direct `pnpm install` commands with named steps (`Install root JS dependencies`) in code quality, unit test, dist files, and release workflows. [[1]](diffhunk://#diff-4a2765c2cfcbd3804a66aab805cb92ddda74de1730923cc5bf53671d0beccf06R27-R36) [[2]](diffhunk://#diff-b117ce55777f198ed74d5eb1cd6319c0b63837e2e9eed5c44b2477658e12248fR24) [[3]](diffhunk://#diff-b117ce55777f198ed74d5eb1cd6319c0b63837e2e9eed5c44b2477658e12248fL32-R38) [[4]](diffhunk://#diff-8e3deeaeb0bdfc6967ff8173f1d99e5001fe75dc497cbfb85fe64ceaade5e399L33-R34) [[5]](diffhunk://#diff-6e608e02c595d53ab6b70822a2bf19abcfc6ddcc976c2f536ad5bfca20f0443fR148) [[6]](diffhunk://#diff-6e608e02c595d53ab6b70822a2bf19abcfc6ddcc976c2f536ad5bfca20f0443fL157-R161)

**Testing and configuration changes:**

* Updated `package.json` to run browser tests in all workspaces concurrently, removed the unused `webdriverio` dependency, and improved the `test:browser` script for workspace aggregation. [[1]](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L13-R13) [[2]](diffhunk://#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519L28-R28)
* Renamed `playwright.config.ts` to `playwright.config.base.ts`, added documentation for usage in UX packages, and improved test matching patterns and output directory configuration. [[1]](diffhunk://#diff-8f3b25b652873317fa4aa36b920f753b44dc82f5c1f0d2ff5e6b1781ef1dc90fL1-R30) [[2]](diffhunk://#diff-8f3b25b652873317fa4aa36b920f753b44dc82f5c1f0d2ff5e6b1781ef1dc90fL30-L36)

**Dependency management:**

* Removed `webdriverio` from the lockfile and marked many transitive dependencies as optional in `pnpm-lock.yaml`, reducing the install footprint and improving clarity for unused packages. [[1]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL54-L56) [[2]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR3991) [[3]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR4242) [[4]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL4260-R4260) [[5]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL4270-R4276) [[6]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR4429) [[7]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR4438-R4451) [[8]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR4472-R4480) [[9]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR4530) [[10]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR4541) [[11]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL4543-R4556) [[12]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL4578-R4597) [[13]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL4597-R4613) [[14]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR4622) [[15]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR4670) [[16]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR4685) [[17]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL4704-R4724) [[18]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR4733) [[19]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL4725-R4756) [[20]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbR4779-R4793) [[21]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL4778-R4807) [[22]](diffhunk://#diff-32824c984905bb02bc7ffcef96a77addd1f1602cff71a11fbbfdd7f53ee026bbL4791-R4828)

These changes make the browser testing workflow more robust and maintainable, ensure consistent dependency installation, and clean up unused or optional packages to streamline CI runs.

Commits
-------

dd1c13a Create E2E app & run it in CI

Author: Kocal

.github/workflows/browser-tests.yml

@@ -20,11 +20,22 @@ on:
             - '.github/workflows/app-tests.yaml'
             - '.github/workflows/unit-tests.yaml'
 
+concurrency:
+    group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }}
+    cancel-in-progress: true
+
 jobs:
-    js:
+    test:
         runs-on: ubuntu-latest
+        strategy:
+            fail-fast: false
+            matrix:
+                symfony: ['6.4', '7.3']
+        env:
+            SYMFONY_REQUIRE: '${{ matrix.symfony }}.*'
         steps:
             -   uses: actions/checkout@v4
+
             -   run: npm i -g corepack && corepack enable
             -   uses: actions/setup-node@v4
                 with:
@@ -33,21 +44,76 @@ jobs:
                     cache-dependency-path: |
                         pnpm-lock.yaml
                         package.json
-                        src/**/package.json
-            -   run: pnpm install --frozen-lockfile
 
-            -   name: Install custom browsers
-                run: node ./bin/get_browsers.mjs
+            - name: Install root JS dependencies
+              run: pnpm install --frozen-lockfile
+
+            - name: Install custom browsers
+              run: node ./bin/get_browsers.mjs
+
+            - name: Install browsers with Playwright
+              run: pnpm exec playwright install firefox ffmpeg
+
+            - uses: shivammathur/setup-php@v2
+              with:
+                  php-version: 8.2
+                  tools: symfony-cli, flex
+
+            - name: Install root PHP dependencies
+              uses: ramsey/composer-install@v3
+              with:
+                  working-directory: ${{ github.workspace }}
+
+            - name: Build root packages
+              run: php .github/build-packages.php
 
-            -   name: Install browsers with Playwright
-                run: pnpm exec playwright install firefox ffmpeg
+            - name: Start Docker containers
+              run: docker compose up -d --build
+              working-directory: test_apps/e2e-app
 
-            # TODO: Install the E2E app + run webserver
-            -   run: pnpm run test:browser
+            - name: Configure E2E app
+              run: |
+                  echo 'APP_ENV=prod' >> .env.local
+                  echo 'APP_DEBUG=0' >> .env.local
+                  echo 'APP_SECRET=df4c071596e64cc75a349456f2887ae2419ae650' >> .env.local
+              working-directory: test_apps/e2e-app
+
+            - name: Install E2E PHP dependencies
+              uses: ramsey/composer-install@v3
+              with:
+                  working-directory: test_apps/e2e-app
+                  dependency-versions: highest
+                  composer-options: --no-dev
+                  custom-cache-suffix: symfony-${{ matrix.symfony }}
+
+            - name: Prepare E2E app
+              run: |
+                  symfony composer dump-autoload --classmap-authoritative --no-dev
+                  symfony composer dump-env
+                  symfony console asset-map:compile
+                  symfony console ux:icons:warm-cache
+              working-directory: test_apps/e2e-app
+
+            - name: Start E2E app
+              run: symfony serve --daemon
+              working-directory: test_apps/e2e-app
+
+            - name: Run browser tests
+              run: pnpm run test:browser
+              id: browser-tests
+
+            - uses: actions/upload-artifact@v4
+              if: ${{ always() && steps.browser-tests.conclusion == 'failure' }}
+              with:
+                  name: Playwright report and output (${{ matrix.symfony }})
+                  path: |
+                      src/**/assets/.playwright-report/
+                      src/**/assets/.playwright-output/
+                  retention-days: 7
 
             - uses: actions/upload-artifact@v4
-              if: ${{ !cancelled() }}
+              if: ${{ always() && steps.browser-tests.conclusion == 'failure' }}
               with:
-                  name: playwright-report
-                  path: .playwright-report/
+                  name: Symfony logs (${{ matrix.symfony }})
+                  path: test_apps/e2e-app/var/log/
                   retention-days: 7

.github/workflows/code-quality.yaml

@@ -24,12 +24,16 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
+
             - run: npm i -g corepack && corepack enable
             - uses: actions/setup-node@v4
               with:
                 node-version-file: '.nvmrc'
                 cache: 'pnpm'
-            - run: pnpm install --frozen-lockfile
+
+            - name: Install root JS dependencies
+              run: pnpm install --frozen-lockfile
+
             - run: pnpm run ci
 
     phpstan:

.github/workflows/dist-files-unbuilt.yaml

@@ -21,6 +21,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+
       - run: npm i -g corepack && corepack enable
       - uses: actions/setup-node@v4
         with:
@@ -29,7 +30,12 @@ jobs:
           cache-dependency-path: |
             pnpm-lock.yaml
             **/package.json
-      - run: pnpm install --frozen-lockfile && pnpm run build
+
+      - name: Install root JS dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm run build
 
       - name: Check if JS dist files are current
         run: |

.github/workflows/release-on-npm.yaml

@@ -30,7 +30,8 @@ jobs:
                 pnpm-lock.yaml
                 package.json
                 src/**/package.json
-          - run: pnpm install --frozen-lockfile
+          - name: Install root JS dependencies
+            run: pnpm install --frozen-lockfile
 
           - name: Update version of JS packages
             run: pnpm version ${{ env.VERSION }} --no-git-tag-version --workspaces --no-workspaces-update

.github/workflows/unit-tests.yaml

@@ -145,6 +145,7 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v4
+
             - run: npm i -g corepack && corepack enable
             - uses: actions/setup-node@v4
               with:
@@ -154,5 +155,8 @@ jobs:
                   pnpm-lock.yaml
                   package.json
                   src/**/package.json
-            - run: pnpm install --frozen-lockfile
+
+            - name: Install root JS dependencies
+              run: pnpm install --frozen-lockfile
+
             - run: pnpm run test:unit

.gitignore

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

bin/test_package.sh

@@ -40,10 +40,10 @@ fi
 runTestSuite() {
     if [ "$testType" == "unit" ]; then
       echo -e "🧪  Running unit tests for $workspace...\n"
-      pnpm exec vitest --run "${args[@]}" || { all_tests_passed=false; }
+      (cd "$location"; pnpm exec vitest --run "${args[@]}") || { all_tests_passed=false; }
     elif [ "$testType" == "browser" ]; then
       echo -e "🧪  Running browser tests for $workspace...\n"
-      # TODO: to implement
+      (cd "$location"; pnpm exec playwright test "${args[@]}") || { all_tests_passed=false; }
     fi
 }
 
@@ -99,16 +99,18 @@ processWorkspace() {
                 trimmed_version=$(echo "$version" | tr -d '[:space:]')
                 if [ -n "$trimmed_version" ]; then
                     # Install each version of the library separately
-                    echo -e "  - Install $library@$trimmed_version for $workspace\n"
-                    pnpm add "$library@$trimmed_version" --save-peer --filter "$workspace"
+                    echo -e "  - Installing $library@$trimmed_version for $workspace\n"
+                    (cd "$location" || exit 1; pnpm add "$library@$trimmed_version" --save-peer --silent)
+                    echo -e "  - Building $workspace assets...\n"
+                    (cd "$location" || exit 1; pnpm run build)
 
                     runTestSuite
                 fi
             done
         done
 
-        echo " -> Reverting version changes from $package_json_path"
-        git checkout -- "$package_json_path" "$PROJECT_DIR/pnpm-lock.yaml"
+        echo " -> Reverting changes"
+        git checkout -- "$package_json_path" "$location/dist" "$PROJECT_DIR/pnpm-lock.yaml"
     else
         echo -e " -> No peerDependencies found with multiple versions defined\n"
         runTestSuite

package.json

@@ -10,7 +10,7 @@
         "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 exec playwright test",
+        "test:browser": "pnpm run -r --workspace-concurrency=1 test:browser",
         "check": "biome check",
         "ci": "biome ci"
     },
@@ -25,8 +25,7 @@
         "pkg-types": "^2.2.0",
         "tinyglobby": "^0.2.14",
         "tsup": "^8.5.0",
-        "vitest": "^3.2.4",
-        "webdriverio": "^9.19.1"
+        "vitest": "^3.2.4"
     },
     "version": "2.27.0"
 }

playwright.config.ts renamed to playwright.config.base.ts

@@ -1,23 +1,33 @@
-import { defineConfig, devices } from '@playwright/test';
+/**
+ * Playwright base configuration for UX packages, for browser testing.
+ *
+ * This file is not intended to be used directly, but to be used by UX packages themselves.
+ * For example:
+ * ```typescript
+ * // src/Autocomplete/assets/playwright.config.ts
+ *
+ * import baseConfig from '../../../../../../playwright.config.base';
+ *
+ * export default baseConfig;
+ * ```
+ */
 
+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/
+    testMatch: [
+        '**/test/browser/**/*.{test,spec}.ts',
+        '**/test/**/*.browser.{test,spec}.ts',
     ],
 
     reporter: [
         ['list'],
         ['html', { open: process.env.CI ? 'never' : 'on-failure', outputFolder: '.playwright-report' }],
     ],
 
+    outputDir: '.playwright-output',
+
     use: {
         // Base URL to use in actions like `await page.goto('/')`.
         baseURL: 'http://localhost:9876',
@@ -27,13 +37,6 @@ export default defineConfig({
         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',