Add Playwright coverage and CI quality gates

.github/workflows/ci.yml

@@ -0,0 +1,44 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  quality:
+    name: Quality and critical user flows
+    runs-on: ubuntu-latest
+    timeout-minutes: 25
+    env:
+      NEXT_PUBLIC_DEFAULT_SITE_URL: http://127.0.0.1:3100
+      PLAYWRIGHT_BASE_URL: http://127.0.0.1:3100
+      PLAYWRIGHT_WEB_SERVER_COMMAND: pnpm start --hostname 127.0.0.1 --port 3100
+    steps:
+      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+
+      - uses: pnpm/action-setup@b906affcce14559ad1aafd4ab0e942779e9f58b1 # v4.3.0
+        with:
+          version: 11.1.2
+
+      - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Playwright browser
+        run: pnpm exec playwright install --with-deps chromium
+
+      - name: Run quality gate
+        run: pnpm check

.gitignore

@@ -8,6 +8,8 @@
 
 # testing
 /coverage
+/playwright-report/
+/test-results/
 
 # next.js
 /.next/

.lintstagedrc

@@ -0,0 +1,5 @@
+{
+  "*.{js,jsx,ts,tsx,html,css}": "prettier --write",
+  "*.{md,mdx}": "prettier --write",
+  "*.{js,jsx,ts,tsx}": "eslint --cache --fix"
+}

package.json

@@ -5,14 +5,22 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "check": "pnpm lint && pnpm typecheck && pnpm build && pnpm test:e2e",
     "postbuild": "next-sitemap --config next-sitemap.config.cjs",
     "start": "next start",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
+    "test": "playwright test",
+    "test:e2e": "playwright test",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
+    "prepare": "pnpm run update-git-hooks",
+    "update-git-hooks": "simple-git-hooks",
     "typecheck": "next typegen && tsc --noEmit"
   },
+  "engines": {
+    "node": "22.x"
+  },
   "packageManager": "pnpm@11.1.2",
   "dependencies": {
     "@c15t/nextjs": "2.1.0",
@@ -74,6 +82,7 @@
     "@eslint/js": "10.0.1",
     "@ianvs/prettier-plugin-sort-imports": "4.7.1",
     "@next/eslint-plugin-next": "16.2.6",
+    "@playwright/test": "1.61.1",
     "@shikijs/rehype": "4.0.2",
     "@shikijs/transformers": "4.0.2",
     "@tailwindcss/typography": "0.5.19",
@@ -92,13 +101,15 @@
     "eslint-config-prettier": "10.1.8",
     "hast-util-to-jsx-runtime": "2.3.6",
     "image-size": "2.0.2",
+    "lint-staged": "16.2.7",
     "mdast-util-mdx-jsx": "3.2.0",
     "mdast-util-mdxjs-esm": "2.0.1",
     "npm-to-yarn": "3.0.1",
     "postcss": "8.5.14",
     "postcss-nesting": "14.0.0",
     "prettier": "3.8.3",
     "prettier-plugin-tailwindcss": "0.8.0",
+    "simple-git-hooks": "2.13.1",
     "tailwindcss": "4.3.0",
     "tw-animate-css": "1.4.0",
     "typescript": "6.0.3",

playwright.config.ts

@@ -0,0 +1,40 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? 'http://127.0.0.1:3100';
+const isLocalBaseUrl = /^https?:\/\/(127\.0\.0\.1|localhost)(:\d+)?$/.test(baseURL);
+const shouldStartWebServer = isLocalBaseUrl && process.env.PLAYWRIGHT_SKIP_WEB_SERVER !== '1';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  outputDir: 'test-results/playwright',
+  fullyParallel: false,
+  forbidOnly: Boolean(process.env.CI),
+  retries: process.env.CI ? 2 : 0,
+  workers: 1,
+  reporter: 'list',
+  use: {
+    baseURL,
+    screenshot: 'only-on-failure',
+    trace: 'retain-on-failure',
+    video: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'mobile-chromium',
+      use: { ...devices['Pixel 7'] },
+    },
+  ],
+  webServer: shouldStartWebServer
+    ? {
+        command:
+          process.env.PLAYWRIGHT_WEB_SERVER_COMMAND ?? 'pnpm dev --hostname 127.0.0.1 --port 3100',
+        url: baseURL,
+        reuseExistingServer: false,
+        timeout: 120_000,
+      }
+    : undefined,
+});