test(playwright): install playwright

packages/web/package.json

@@ -10,7 +10,8 @@
     "typecheck": "react-router typegen && tsc",
     "lint": "biome lint . && stylelint **/*.css",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest",
+    "playwright": "playwright test"
   },
   "dependencies": {
     "@pigment-css/react": "0.0.30",
@@ -27,6 +28,7 @@
   "devDependencies": {
     "@biomejs/biome": "1.9.4",
     "@pigment-css/vite-plugin": "0.0.30",
+    "@playwright/test": "1.50.1",
     "@react-router/dev": "7.4.1",
     "@types/lodash": "4.17.16",
     "@types/node": "22.13.17",

packages/web/playwright.config.ts

@@ -0,0 +1,44 @@
+import { defineConfig, devices } from "@playwright/test";
+
+export default defineConfig({
+  // Look for test files in the "tests" directory, relative to this configuration file.
+  testDir: "tests",
+
+  // Run all tests in parallel.
+  fullyParallel: true,
+
+  ...(process.env["CI"]
+    ? {
+        // Fail the build on CI if you accidentally left test.only in the source code.
+        forbidOnly: true,
+        // Retry on CI only.
+        retries: 2,
+        // Opt out of parallel tests on CI.
+        workers: 1,
+      }
+    : {}),
+
+  // Reporter to use
+  reporter: "html",
+
+  use: {
+    // Base URL to use in actions like `await page.goto('/')`.
+    baseURL: "http://localhost:5173",
+
+    // Collect trace when retrying the failed test.
+    trace: "on-first-retry",
+  },
+  // Configure projects for major browsers.
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+  // Run your local dev server before starting the tests.
+  // webServer: {
+  //   command: "npm run start",
+  //   url: "http://localhost:3000",
+  //   reuseExistingServer: !process.env["CI"],
+  // },
+});

packages/web/tests/example.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+
+  // Expect a title "to contain" a substring.
+  await expect(page).toHaveTitle(/Playwright/);
+});
+
+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();
+});

packages/web/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "files": [],
   "extends": "../../tsconfig.base.json",
-  "include": ["app", "*.ts"],
+  "include": ["app", "*.ts", "tests"],
   "compilerOptions": {
     "types": ["vitest/importMeta", "vite/client", "node"],
     "rootDirs": [".", "./.react-router/types"],