✨ Add playwright e2e test support

.gitignore

@@ -5,3 +5,5 @@ node_modules
 /public/build
 .env
 /coverage
+/playwright-report
+/test-results

package.json

@@ -7,21 +7,29 @@
     "dev": "npm run clean && node ./server.mjs",
     "build": "npm run clean && vite build && vite build --ssr",
     "start": "cross-env NODE_ENV=production node server.mjs",
+    "start:mocks": "cross-env NODE_ENV=production MOCKS=true node server.mjs",
     "test": "vitest",
     "typecheck": "tsc",
     "lint": "eslint .",
     "format": "prettier --write .",
-    "validate": "run-p \"test -- --run\" lint typecheck",
+    "validate": "run-p \"test -- --run\" lint typecheck test:e2e:run",
     "coverage": "vitest run --coverage",
+    "test:e2e": "npm run test:e2e:dev --silent",
+    "test:e2e:dev": "playwright test --ui",
+    "pretest:e2e:run": "npm run build",
+    "test:e2e:run": "cross-env CI=true playwright test",
+    "test:e2e:install": "npx playwright install --with-deps chromium",
     "clean": "rm -rf build public/build",
     "nuke": "npm run clean && rm -rf node_modules package-lock.json && npm i"
   },
   "dependencies": {
+    "@playwright/test": "^1.40.1",
     "@remix-run/css-bundle": "2.3.1",
     "@remix-run/express": "^2.3.1",
     "@remix-run/node": "2.3.1",
     "@remix-run/react": "2.3.1",
     "cross-env": "^7.0.3",
+    "dotenv": "^16.3.1",
     "express": "^4.18.2",
     "isbot": "^3.7.1",
     "react": "18.3.0-canary-640ccebb7-20231201",

playwright.config.ts

@@ -0,0 +1,41 @@
+import 'dotenv/config'
+import { defineConfig, devices } from '@playwright/test'
+
+const PORT = process.env.PORT || '3000'
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  timeout: 15 * 1000,
+  expect: {
+    timeout: 5 * 1000,
+  },
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: `http://localhost:${PORT}/`,
+    trace: 'on-first-retry',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+  ],
+
+  webServer: {
+    command: process.env.CI ? 'npm run start:mocks' : 'npm run dev',
+    port: Number(PORT),
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+    stderr: 'pipe',
+    env: {
+      PORT,
+    },
+  },
+})

tests/e2e/counter.test.ts

@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/test'
+
+test('counter test', async ({ page }) => {
+  await page.goto('/counter')
+  await page.getByRole('button').click()
+  await expect(page).toHaveURL(`/counter`)
+  const button = await page.getByRole('button', { name: /Count/i })
+  expect(await button.textContent()).toBe('Count: 1')
+})