chore: add playwright e2e test automation setup

.github/workflows/playwright.yml

@@ -0,0 +1,55 @@
+name: Playwright E2E Tests
+
+on:
+  push:
+    branches: ["**"]
+  pull_request:
+    branches: ["**"]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    timeout-minutes: 60
+    env:
+      CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
+      CLERK_PUBLISHABLE_KEY: ${{ secrets.CLERK_PUBLISHABLE_KEY }}
+      VITE_CLERK_PUBLISHABLE_KEY: ${{ secrets.CLERK_PUBLISHABLE_KEY }}
+      DATABASE_URL: file:./prisma/test.db
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Sync database
+        run: bunx prisma db push
+
+      - name: Install Playwright browsers
+        run: bunx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: bun run test:e2e
+
+      - name: Upload Playwright report
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
+
+      - name: Upload test results
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-test-results
+          path: test-results/
+          retention-days: 30
+          if-no-files-found: ignore

.gitignore

@@ -10,3 +10,17 @@
 .env.prod
 
 prisma/*.db
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/
+/playwright/.temp/
+/playwright/screenshots/
+/playwright/videos/
+/playwright-traces/
+/playwright-debug.log
+node_modules/
+.cache/

package.json

@@ -10,7 +10,11 @@
 		"format": "bunx --bun prettier . --ignore-path .gitignore --write --cache --cache-location ./node_modules/.cache/prettier",
 		"typecheck": "bunx --bun react-router typegen && tsc",
 		"fun": "bun format && bun typecheck && bun lint",
-		"cron": "bun run cron/index.ts"
+		"cron": "bun run cron/index.ts",
+		"test:e2e": "playwright test",
+		"test:e2e:ui": "playwright test --ui",
+		"test:e2e:headed": "playwright test --headed",
+		"test:e2e:debug": "playwright test --debug"
 	},
 	"dependencies": {
 		"@ai-sdk/anthropic": "^1.2.11",
@@ -58,6 +62,7 @@
 	},
 	"devDependencies": {
 		"@eslint/js": "^9.26.0",
+		"@playwright/test": "^1.56.1",
 		"@react-router/dev": "^7.6.0",
 		"@tailwindcss/typography": "^0.5.16",
 		"@tailwindcss/vite": "^4.1.6",

playwright.config.ts

@@ -0,0 +1,83 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: "./tests",
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: "html",
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('')`. */
+		baseURL: "http://localhost:5173",
+
+		// Record trace only when retrying a test for the first time.
+		trace: "on-first-retry",
+
+		// Capture screenshot after each test failure.
+		screenshot: "only-on-failure",
+
+		// Record video only when retrying a test for the first time.
+		video: "on-first-retry",
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		{
+			name: "chromium",
+			use: { ...devices["Desktop Chrome"] },
+		},
+
+		{
+			name: "firefox",
+			use: { ...devices["Desktop Firefox"] },
+		},
+
+		{
+			name: "webkit",
+			use: { ...devices["Desktop Safari"] },
+		},
+
+		/* Test against mobile viewports. */
+		{
+			name: "Mobile Chrome",
+			use: { ...devices["Pixel 5"] },
+		},
+
+		// {
+		// 	name: "Mobile Safari",
+		// 	use: { ...devices["iPhone 12"] },
+		// },
+
+		/* Test against branded browsers. */
+		// {
+		//   name: 'Microsoft Edge',
+		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+		// },
+		// {
+		//   name: 'Google Chrome',
+		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+		// },
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: `CLERK_PUBLISHABLE_KEY=${process.env.CLERK_PUBLISHABLE_KEY} \
+              VITE_CLERK_PUBLISHABLE_KEY=${process.env.VITE_CLERK_PUBLISHABLE_KEY} \
+              CLERK_SECRET_KEY=${process.env.CLERK_SECRET_KEY} \
+              DATABASE_URL=${process.env.DATABASE_URL} \
+              bun run dev`,
+		url: "http://localhost:5173",
+		reuseExistingServer: !process.env.CI,
+		timeout: 120 * 1000,
+	},
+});

tests/e2e/example.spec.ts

@@ -0,0 +1,20 @@
+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();
+});