test: e2e

.github/workflows/verify.yml

@@ -30,4 +30,54 @@ jobs:
         run: pnpm run check
 
       - name: Check types
-        run: pnpm run check:types
+        run: pnpm run check:types
+
+  e2e:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    permissions:
+      contents: read
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+
+      - name: Setup pnpm
+        run: corepack enable pnpm
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Get Playwright version
+        id: playwright-version
+        run: echo "version=$(pnpm exec playwright --version | cut -d' ' -f2)" >> $GITHUB_OUTPUT
+
+      - name: Cache Playwright browsers
+        id: playwright-cache
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-${{ runner.os }}-${{ steps.playwright-version.outputs.version }}
+
+      - name: Install Playwright browsers
+        if: steps.playwright-cache.outputs.cache-hit != 'true'
+        run: pnpm exec playwright install chromium --with-deps
+
+      - name: Install Playwright system deps
+        if: steps.playwright-cache.outputs.cache-hit == 'true'
+        run: pnpm exec playwright install-deps chromium
+
+      - name: Run Playwright tests
+        run: pnpm run test:e2e
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 15

.gitignore

@@ -28,3 +28,7 @@ src/pages.gen.ts
 .vocs
 
 src/pages/protocol/tips/tip-*
+
+# Playwright
+playwright-report/
+test-results/

e2e/faucet.spec.ts

@@ -0,0 +1,18 @@
+import { expect, test } from '@playwright/test'
+
+test('fund an address via faucet', async ({ page }) => {
+  await page.goto('/quickstart/faucet')
+
+  // Switch to "Fund an address" tab
+  await page.getByRole('tab', { name: 'Fund an address' }).click()
+
+  // Enter an address
+  const addressInput = page.getByPlaceholder('0x...')
+  await addressInput.fill('0xbeefcafe54750903ac1c8909323af7beb21ea2cb')
+
+  // Click "Add funds" button
+  await page.getByRole('button', { name: 'Add funds' }).click()
+
+  // Confirm "View receipt" link is visible
+  await expect(page.getByRole('link', { name: 'View receipt' })).toBeVisible({ timeout: 30000 })
+})

package.json

@@ -9,7 +9,8 @@
     "build": "tsgo --build && vite build",
     "check": "biome check --write --unsafe .",
     "check:types": "tsgo --project tsconfig.json --noEmit",
-    "preview": "node dist/preview.js"
+    "preview": "node dist/preview.js",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@iconify-json/lucide": "^1.2.86",
@@ -42,6 +43,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.3.11",
+    "@playwright/test": "^1.58.0",
     "@types/node": "^25.0.10",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",

playwright.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: 'http://localhost:5173',
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+  webServer: {
+    command: 'pnpm run dev',
+    url: 'http://localhost:5173',
+    reuseExistingServer: !process.env.CI,
+  },
+})