test: add Playwright + Vitest harness with first E2E and unit suites

.github/workflows/ci.yml

@@ -39,3 +39,54 @@ jobs:
           name: dist
           path: dist
           retention-days: 14
+
+  e2e:
+    name: Playwright E2E
+    needs: build
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install --frozen-lockfile
+
+      - uses: actions/download-artifact@v4
+        with:
+          name: dist
+          path: dist
+
+      - name: Install Playwright Chromium
+        run: pnpm exec playwright install chromium --with-deps
+
+      - name: Run unit tests
+        run: pnpm test:unit
+
+      - name: Run E2E
+        env:
+          E2E_SKIP_BUILD: '1'
+          CI: '1'
+        run: pnpm exec playwright test
+
+      - name: Upload Playwright report
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report
+          retention-days: 7
+
+      - name: Upload trace and screenshots
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-test-results
+          path: test-results
+          retention-days: 7

.gitignore

@@ -37,3 +37,13 @@ lerna-debug.log*
 
 # Crxjs
 .crx-build/
+
+# Playwright / test artifacts
+playwright-report/
+test-results/
+playwright/.cache
+.pnpm-store/
+
+# OS-specific Playwright snapshots — only *-linux.png is committed (CI canonical)
+tests/e2e/**/*-darwin.png
+tests/e2e/**/*-win32.png

CHANGELOG.md

@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+### Added
+- Add Playwright E2E and Vitest unit test harnesses.
+
 ### Fixed
 - Reminder banner now renders in GitHub's system font stack. Previously the inline `host.style.all = 'initial'` override took precedence over the `:host { font-family }` rule in `banner.css`, so the host element fell back to the browser's default serif and shadow-tree descendants inherited it.
 

eslint.config.js

@@ -23,4 +23,13 @@ export default tseslint.config(
       '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_', varsIgnorePattern: '^_' }],
     },
   },
+  {
+    // Test files: relax React-specific rules that don't apply in Playwright/Vitest context.
+    // Playwright fixtures use a `use` callback that triggers react-hooks/rules-of-hooks.
+    files: ['tests/e2e/fixtures/**/*.ts'],
+    rules: {
+      'react-hooks/rules-of-hooks': 'off',
+      'react-refresh/only-export-components': 'off',
+    },
+  },
 );

package.json

@@ -45,6 +45,13 @@
     "icons": "node scripts/generate-icons.mjs",
     "zip": "node scripts/zip-dist.mjs",
     "screenshots": "node scripts/format-screenshots.mjs",
+    "test": "pnpm test:unit && pnpm test:e2e",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "test:e2e:headed": "E2E_HEADED=1 playwright test --headed",
+    "pretest:e2e": "pnpm build",
     "release:patch": "pnpm version patch -m \"chore: release v%s\"",
     "release:minor": "pnpm version minor -m \"chore: release v%s\"",
     "release:major": "pnpm version major -m \"chore: release v%s\""
@@ -64,24 +71,29 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.28",
     "@eslint/js": "^9.14.0",
+    "@playwright/test": "^1.59.1",
     "@types/chrome": "^0.0.283",
     "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
+    "@vitest/ui": "^2.1.9",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.14.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.12.0",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.49",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "sharp": "^0.33.5",
+    "sinon-chrome": "^3.0.1",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.13.0",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vitest": "^2.1.9"
   },
   "packageManager": "pnpm@10.33.0",
   "pnpm": {

playwright.config.ts

@@ -0,0 +1,26 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: false,
+  workers: 1,
+  retries: process.env.CI ? 1 : 0,
+  reporter: process.env.CI
+    ? [['github'], ['html', { open: 'never' }]]
+    : [['list'], ['html', { open: 'never' }]],
+  use: {
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+  projects: [
+    {
+      name: 'chromium',
+    },
+  ],
+  expect: {
+    toHaveScreenshot: {
+      maxDiffPixelRatio: 0.01,
+    },
+  },
+});