diff --git a/.github/workflows/browser-tests.yml b/.github/workflows/browser-tests.yml
index 1a588d1b237..1fa5296704d 100644
--- a/.github/workflows/browser-tests.yml
+++ b/.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
diff --git a/.gitignore b/.gitignore
index 6f3a6e61fd3..cae3c3cf773 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,5 @@ node_modules
 /vendor
 
 /browsers
+.last-run.json
+.playwright-report/
diff --git a/bin/get_browsers.mjs b/bin/get_browsers.mjs
index 3a47779388d..f5608907934 100644
--- a/bin/get_browsers.mjs
+++ b/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) {
diff --git a/bin/test_package.sh b/bin/test_package.sh
index a1c4a176830..d1d3f6045f5 100755
--- a/bin/test_package.sh
+++ b/bin/test_package.sh
@@ -9,11 +9,28 @@ 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."
@@ -21,20 +38,16 @@ if ! command -v jq &> /dev/null; then
 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
diff --git a/package.json b/package.json
index 5cf8eb763e3..9b13f68bbec 100644
--- a/package.json
+++ b/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",
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 00000000000..83b94788073
--- /dev/null
+++ b/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'],
+            },
+        }
+    ],
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5c154a62042..2f667abb714 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,6 +21,9 @@ importers:
       '@biomejs/biome':
         specifier: ^2.0.4
         version: 2.1.2
+      '@playwright/test':
+        specifier: ^1.54.2
+        version: 1.54.2
       '@puppeteer/browsers':
         specifier: ^2.10.6
         version: 2.10.6
@@ -1326,6 +1329,11 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@playwright/test@1.54.2':
+    resolution: {integrity: sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
 
@@ -3974,6 +3982,10 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
+  '@playwright/test@1.54.2':
+    dependencies:
+      playwright: 1.54.2
+
   '@polka/url@1.0.0-next.29': {}
 
   '@promptbook/utils@0.69.5':
@@ -5546,15 +5558,13 @@ snapshots:
       exsolve: 1.0.7
       pathe: 2.0.3
 
-  playwright-core@1.54.2:
-    optional: true
+  playwright-core@1.54.2: {}
 
   playwright@1.54.2:
     dependencies:
       playwright-core: 1.54.2
     optionalDependencies:
       fsevents: 2.3.2
-    optional: true
 
   postcss-load-config@6.0.1(postcss@8.5.6)(tsx@4.20.3):
     dependencies:
diff --git a/src/Autocomplete/assets/test/browser/placeholder.test.ts b/src/Autocomplete/assets/test/browser/placeholder.test.ts
index 034d90eb9e8..8dd2ca0d582 100644
--- a/src/Autocomplete/assets/test/browser/placeholder.test.ts
+++ b/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();
 });
diff --git a/src/Autocomplete/assets/vitest.config.unit.mjs b/src/Autocomplete/assets/vitest.config.mjs
similarity index 60%
rename from src/Autocomplete/assets/vitest.config.unit.mjs
rename to src/Autocomplete/assets/vitest.config.mjs
index 3a6751f8a05..d63e78be977 100644
--- a/src/Autocomplete/assets/vitest.config.unit.mjs
+++ b/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, {});
diff --git a/src/Chartjs/assets/test/browser/placeholder.test.ts b/src/Chartjs/assets/test/browser/placeholder.test.ts
index 034d90eb9e8..8dd2ca0d582 100644
--- a/src/Chartjs/assets/test/browser/placeholder.test.ts
+++ b/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();
 });
diff --git a/src/Chartjs/assets/vitest.config.unit.mjs b/src/Chartjs/assets/vitest.config.mjs
similarity index 85%
rename from src/Chartjs/assets/vitest.config.unit.mjs
rename to src/Chartjs/assets/vitest.config.mjs
index 25d5f0b55c0..30e3e3c413e 100644
--- a/src/Chartjs/assets/vitest.config.unit.mjs
+++ b/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: {
diff --git a/src/Cropperjs/assets/test/browser/placeholder.test.ts b/src/Cropperjs/assets/test/browser/placeholder.test.ts
index 034d90eb9e8..8dd2ca0d582 100644
--- a/src/Cropperjs/assets/test/browser/placeholder.test.ts
+++ b/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();
 });
diff --git a/src/LazyImage/assets/vitest.config.unit.mjs b/src/Cropperjs/assets/vitest.config.mjs
similarity index 60%
rename from src/LazyImage/assets/vitest.config.unit.mjs
rename to src/Cropperjs/assets/vitest.config.mjs
index 3a6751f8a05..d63e78be977 100644
--- a/src/LazyImage/assets/vitest.config.unit.mjs
+++ b/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, {});
diff --git a/src/Dropzone/assets/test/browser/placeholder.test.ts b/src/Dropzone/assets/test/browser/placeholder.test.ts
index 034d90eb9e8..8dd2ca0d582 100644
--- a/src/Dropzone/assets/test/browser/placeholder.test.ts
+++ b/src/Dropzone/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();
 });
diff --git a/src/Cropperjs/assets/vitest.config.unit.mjs b/src/Dropzone/assets/vitest.config.mjs
similarity index 60%
rename from src/Cropperjs/assets/vitest.config.unit.mjs
rename to src/Dropzone/assets/vitest.config.mjs
index 3a6751f8a05..d63e78be977 100644
--- a/src/Cropperjs/assets/vitest.config.unit.mjs
+++ b/src/Dropzone/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, {});
diff --git a/src/Dropzone/assets/vitest.config.unit.mjs b/src/LazyImage/assets/vitest.config.mjs
similarity index 60%
rename from src/Dropzone/assets/vitest.config.unit.mjs
rename to src/LazyImage/assets/vitest.config.mjs
index 3a6751f8a05..d63e78be977 100644
--- a/src/Dropzone/assets/vitest.config.unit.mjs
+++ b/src/LazyImage/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, {});
diff --git a/src/LiveComponent/assets/test/browser/placeholder.test.ts b/src/LiveComponent/assets/test/browser/placeholder.test.ts
index 034d90eb9e8..8dd2ca0d582 100644
--- a/src/LiveComponent/assets/test/browser/placeholder.test.ts
+++ b/src/LiveComponent/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();
 });
diff --git a/src/LiveComponent/assets/vitest.config.mjs b/src/LiveComponent/assets/vitest.config.mjs
new file mode 100644
index 00000000000..d63e78be977
--- /dev/null
+++ b/src/LiveComponent/assets/vitest.config.mjs
@@ -0,0 +1,4 @@
+import { mergeConfig } from 'vitest/config';
+import configShared from '../../../vitest.config.mjs';
+
+export default mergeConfig(configShared, {});
diff --git a/src/LiveComponent/assets/vitest.config.unit.mjs b/src/LiveComponent/assets/vitest.config.unit.mjs
deleted file mode 100644
index 3a6751f8a05..00000000000
--- a/src/LiveComponent/assets/vitest.config.unit.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
-
-export default mergeConfig(configShared, {});
diff --git a/src/Map/assets/vitest.config.mjs b/src/Map/assets/vitest.config.mjs
new file mode 100644
index 00000000000..d63e78be977
--- /dev/null
+++ b/src/Map/assets/vitest.config.mjs
@@ -0,0 +1,4 @@
+import { mergeConfig } from 'vitest/config';
+import configShared from '../../../vitest.config.mjs';
+
+export default mergeConfig(configShared, {});
diff --git a/src/Map/assets/vitest.config.unit.mjs b/src/Map/assets/vitest.config.unit.mjs
deleted file mode 100644
index 3a6751f8a05..00000000000
--- a/src/Map/assets/vitest.config.unit.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
-
-export default mergeConfig(configShared, {});
diff --git a/src/Notify/assets/test/browser/placeholder.test.ts b/src/Notify/assets/test/browser/placeholder.test.ts
index 034d90eb9e8..8dd2ca0d582 100644
--- a/src/Notify/assets/test/browser/placeholder.test.ts
+++ b/src/Notify/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();
 });
diff --git a/src/Notify/assets/vitest.config.mjs b/src/Notify/assets/vitest.config.mjs
new file mode 100644
index 00000000000..d63e78be977
--- /dev/null
+++ b/src/Notify/assets/vitest.config.mjs
@@ -0,0 +1,4 @@
+import { mergeConfig } from 'vitest/config';
+import configShared from '../../../vitest.config.mjs';
+
+export default mergeConfig(configShared, {});
diff --git a/src/Notify/assets/vitest.config.unit.mjs b/src/Notify/assets/vitest.config.unit.mjs
deleted file mode 100644
index 3a6751f8a05..00000000000
--- a/src/Notify/assets/vitest.config.unit.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
-
-export default mergeConfig(configShared, {});
diff --git a/src/React/assets/test/browser/placeholder.test.ts b/src/React/assets/test/browser/placeholder.test.ts
index 034d90eb9e8..8dd2ca0d582 100644
--- a/src/React/assets/test/browser/placeholder.test.ts
+++ b/src/React/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();
 });
diff --git a/src/React/assets/vitest.config.unit.mjs b/src/React/assets/vitest.config.mjs
similarity index 72%
rename from src/React/assets/vitest.config.unit.mjs
rename to src/React/assets/vitest.config.mjs
index eef0b5cf068..bc4ba85dc38 100644
--- a/src/React/assets/vitest.config.unit.mjs
+++ b/src/React/assets/vitest.config.mjs
@@ -1,6 +1,6 @@
 import react from '@vitejs/plugin-react';
 import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
+import configShared from '../../../vitest.config.mjs';
 
 export default mergeConfig(configShared, {
     plugins: [react()],
diff --git a/src/StimulusBundle/assets/vitest.config.mjs b/src/StimulusBundle/assets/vitest.config.mjs
new file mode 100644
index 00000000000..d63e78be977
--- /dev/null
+++ b/src/StimulusBundle/assets/vitest.config.mjs
@@ -0,0 +1,4 @@
+import { mergeConfig } from 'vitest/config';
+import configShared from '../../../vitest.config.mjs';
+
+export default mergeConfig(configShared, {});
diff --git a/src/StimulusBundle/assets/vitest.config.unit.mjs b/src/StimulusBundle/assets/vitest.config.unit.mjs
deleted file mode 100644
index 3a6751f8a05..00000000000
--- a/src/StimulusBundle/assets/vitest.config.unit.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
-
-export default mergeConfig(configShared, {});
diff --git a/src/Svelte/assets/test/browser/placeholder.test.ts b/src/Svelte/assets/test/browser/placeholder.test.ts
index 034d90eb9e8..8dd2ca0d582 100644
--- a/src/Svelte/assets/test/browser/placeholder.test.ts
+++ b/src/Svelte/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();
 });
diff --git a/src/Svelte/assets/vitest.config.unit.mjs b/src/Svelte/assets/vitest.config.mjs
similarity index 74%
rename from src/Svelte/assets/vitest.config.unit.mjs
rename to src/Svelte/assets/vitest.config.mjs
index ddf0afec276..a63d97b9966 100644
--- a/src/Svelte/assets/vitest.config.unit.mjs
+++ b/src/Svelte/assets/vitest.config.mjs
@@ -1,6 +1,6 @@
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
+import configShared from '../../../vitest.config.mjs';
 
 export default mergeConfig(configShared, {
     plugins: [svelte()],
diff --git a/src/Swup/assets/vitest.config.mjs b/src/Swup/assets/vitest.config.mjs
new file mode 100644
index 00000000000..d63e78be977
--- /dev/null
+++ b/src/Swup/assets/vitest.config.mjs
@@ -0,0 +1,4 @@
+import { mergeConfig } from 'vitest/config';
+import configShared from '../../../vitest.config.mjs';
+
+export default mergeConfig(configShared, {});
diff --git a/src/Swup/assets/vitest.config.unit.mjs b/src/Swup/assets/vitest.config.unit.mjs
deleted file mode 100644
index 3a6751f8a05..00000000000
--- a/src/Swup/assets/vitest.config.unit.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
-
-export default mergeConfig(configShared, {});
diff --git a/src/TogglePassword/assets/vitest.config.mjs b/src/TogglePassword/assets/vitest.config.mjs
new file mode 100644
index 00000000000..d63e78be977
--- /dev/null
+++ b/src/TogglePassword/assets/vitest.config.mjs
@@ -0,0 +1,4 @@
+import { mergeConfig } from 'vitest/config';
+import configShared from '../../../vitest.config.mjs';
+
+export default mergeConfig(configShared, {});
diff --git a/src/TogglePassword/assets/vitest.config.unit.mjs b/src/TogglePassword/assets/vitest.config.unit.mjs
deleted file mode 100644
index 3a6751f8a05..00000000000
--- a/src/TogglePassword/assets/vitest.config.unit.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
-
-export default mergeConfig(configShared, {});
diff --git a/src/Translator/assets/test/browser/placeholder.test.ts b/src/Translator/assets/test/browser/placeholder.test.ts
index 034d90eb9e8..8dd2ca0d582 100644
--- a/src/Translator/assets/test/browser/placeholder.test.ts
+++ b/src/Translator/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();
 });
diff --git a/src/Translator/assets/vitest.config.mjs b/src/Translator/assets/vitest.config.mjs
new file mode 100644
index 00000000000..d63e78be977
--- /dev/null
+++ b/src/Translator/assets/vitest.config.mjs
@@ -0,0 +1,4 @@
+import { mergeConfig } from 'vitest/config';
+import configShared from '../../../vitest.config.mjs';
+
+export default mergeConfig(configShared, {});
diff --git a/src/Translator/assets/vitest.config.unit.mjs b/src/Translator/assets/vitest.config.unit.mjs
deleted file mode 100644
index 3a6751f8a05..00000000000
--- a/src/Translator/assets/vitest.config.unit.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
-
-export default mergeConfig(configShared, {});
diff --git a/src/Turbo/assets/test/browser/placeholder.test.ts b/src/Turbo/assets/test/browser/placeholder.test.ts
index 034d90eb9e8..8dd2ca0d582 100644
--- a/src/Turbo/assets/test/browser/placeholder.test.ts
+++ b/src/Turbo/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();
 });
diff --git a/src/Turbo/assets/vitest.config.mjs b/src/Turbo/assets/vitest.config.mjs
new file mode 100644
index 00000000000..d63e78be977
--- /dev/null
+++ b/src/Turbo/assets/vitest.config.mjs
@@ -0,0 +1,4 @@
+import { mergeConfig } from 'vitest/config';
+import configShared from '../../../vitest.config.mjs';
+
+export default mergeConfig(configShared, {});
diff --git a/src/Turbo/assets/vitest.config.unit.mjs b/src/Turbo/assets/vitest.config.unit.mjs
deleted file mode 100644
index 3a6751f8a05..00000000000
--- a/src/Turbo/assets/vitest.config.unit.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
-
-export default mergeConfig(configShared, {});
diff --git a/src/Typed/assets/vitest.config.mjs b/src/Typed/assets/vitest.config.mjs
new file mode 100644
index 00000000000..d63e78be977
--- /dev/null
+++ b/src/Typed/assets/vitest.config.mjs
@@ -0,0 +1,4 @@
+import { mergeConfig } from 'vitest/config';
+import configShared from '../../../vitest.config.mjs';
+
+export default mergeConfig(configShared, {});
diff --git a/src/Typed/assets/vitest.config.unit.mjs b/src/Typed/assets/vitest.config.unit.mjs
deleted file mode 100644
index 3a6751f8a05..00000000000
--- a/src/Typed/assets/vitest.config.unit.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
-
-export default mergeConfig(configShared, {});
diff --git a/src/Vue/assets/test/browser/placeholder.test.ts b/src/Vue/assets/test/browser/placeholder.test.ts
index 034d90eb9e8..8dd2ca0d582 100644
--- a/src/Vue/assets/test/browser/placeholder.test.ts
+++ b/src/Vue/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();
 });
diff --git a/src/Vue/assets/vitest.config.unit.mjs b/src/Vue/assets/vitest.config.mjs
similarity index 71%
rename from src/Vue/assets/vitest.config.unit.mjs
rename to src/Vue/assets/vitest.config.mjs
index 10d4ac08519..1fc20581911 100644
--- a/src/Vue/assets/vitest.config.unit.mjs
+++ b/src/Vue/assets/vitest.config.mjs
@@ -1,6 +1,6 @@
 import vue from '@vitejs/plugin-vue';
 import { mergeConfig } from 'vitest/config';
-import configShared from '../../../vitest.config.unit.mjs';
+import configShared from '../../../vitest.config.mjs';
 
 export default mergeConfig(configShared, {
     plugins: [vue()],
diff --git a/vitest.config.unit.mjs b/vitest.config.mjs
similarity index 100%
rename from vitest.config.unit.mjs
rename to vitest.config.mjs