feat(e2e): add staging E2E testing infrastructure

- Create playwright.staging.config.ts with staging baseURL and increased timeouts
- Add playwright-staging-setup.ts for auth fixture validation
- Create e2e/fixtures/auth/staging/ directory structure
- Add npm script test:e2e:staging
- Document staging E2E workflow in docs/testing-principles.md
- Update CLAUDE.md with staging test command
- Add *.staging.json to .gitignore for auth fixtures

Author: zainfathoni

.gitignore

@@ -20,6 +20,7 @@ coverage
 
 # Playwright
 *.local.*
+*.staging.json
 test-results
 playwright-report
 

CLAUDE.md

@@ -16,6 +16,7 @@ npm run build            # Production build
 # Testing
 npm test                 # Vitest unit tests
 npm run test:e2e:run     # Playwright E2E tests
+npm run test:e2e:staging # E2E tests against staging (requires auth fixtures)
 
 # Code Quality
 npm run lint             # ESLint

docs/testing-principles.md

@@ -216,6 +216,51 @@ test.use({
 })
 ```
 
+### Staging E2E Tests
+
+Run E2E tests against the staging environment to validate deployments:
+
+```bash
+# Run staging E2E tests
+npm run test:e2e:staging
+```
+
+#### Setting Up Staging Authentication
+
+Since staging uses real email delivery, auth fixtures must be created manually:
+
+1. Login to https://staging.kelas.rumahberbagi.com in your browser
+2. Open DevTools > Application > Storage > Cookies
+3. Export cookies using a browser extension (e.g., "EditThisCookie")
+4. Save to `e2e/fixtures/auth/staging/<role>.staging.json` in this format:
+
+```json
+{
+  "cookies": [
+    {
+      "name": "__session",
+      "value": "...",
+      "domain": "staging.kelas.rumahberbagi.com",
+      "path": "/",
+      "expires": -1,
+      "httpOnly": true,
+      "secure": true,
+      "sameSite": "Lax"
+    }
+  ],
+  "origins": []
+}
+```
+
+Required auth fixtures:
+
+- `member.staging.json` - Regular member
+- `author.staging.json` - Course author
+- `admin.staging.json` - Administrator
+
+**Note:** Auth fixtures are gitignored and must be recreated when sessions
+expire.
+
 ### Best Practices
 
 1. **Test user journeys** - Focus on complete user flows

e2e/fixtures/auth/staging/.gitkeep

@@ -28,6 +28,7 @@
     "test:e2e:dev": "cross-env RUNNING_E2E=true start-server-and-test dev http-get://localhost:3000/ test:e2e",
     "test:e2e:run": "cross-env RUNNING_E2E=true DATABASE_URL=file:./test.db start-server-and-test start:e2e http-get://localhost:3000/ test:e2e",
     "test:e2e:docker": "playwright test --config=playwright.docker.config.ts",
+    "test:e2e:staging": "playwright test --config=playwright.staging.config.ts",
     "test:e2e:production": "cross-env BASE_URL=https://kelas.rumahberbagi.com playwright test --config=playwright.docker.config.ts",
     "type-check": "tsc --noEmit",
     "setup": "npm install && prisma migrate reset --force && npm run test:e2e:run",

package.json

@@ -0,0 +1,57 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+const STAGING_AUTH_DIR = 'e2e/fixtures/auth/staging'
+const REQUIRED_AUTH_FILES = [
+  'member.staging.json',
+  'author.staging.json',
+  'admin.staging.json',
+]
+
+/**
+ * Global setup for staging E2E tests.
+ *
+ * Unlike local tests, staging authentication cannot be automated via magic link
+ * because emails are sent to real addresses. Instead, this setup validates that
+ * manually-exported auth fixtures exist.
+ *
+ * To create auth fixtures for staging:
+ * 1. Login to https://staging.kelas.rumahberbagi.com in your browser
+ * 2. Open DevTools > Application > Storage > Cookies
+ * 3. Export the cookies using browser extension or manually copy them
+ * 4. Save to e2e/fixtures/auth/staging/<role>.staging.json in Playwright's
+ *    storageState format:
+ *    {
+ *      "cookies": [{ "name": "...", "value": "...", "domain": "...", ... }],
+ *      "origins": []
+ *    }
+ */
+async function globalSetup() {
+  if (!fs.existsSync(STAGING_AUTH_DIR)) {
+    fs.mkdirSync(STAGING_AUTH_DIR, { recursive: true })
+    console.log(`Created staging auth directory: ${STAGING_AUTH_DIR}`)
+  }
+
+  const missingFiles: string[] = []
+
+  for (const file of REQUIRED_AUTH_FILES) {
+    const filePath = path.join(STAGING_AUTH_DIR, file)
+    if (!fs.existsSync(filePath)) {
+      missingFiles.push(file)
+    }
+  }
+
+  if (missingFiles.length > 0) {
+    console.warn('\n⚠️  Missing staging auth fixtures:')
+    for (const file of missingFiles) {
+      console.warn(`   - ${STAGING_AUTH_DIR}/${file}`)
+    }
+    console.warn(
+      '\nSee playwright-staging-setup.ts for instructions on creating these files.\n'
+    )
+  }
+
+  console.log('✓ Staging global setup complete')
+}
+
+export default globalSetup

playwright-staging-setup.ts

@@ -0,0 +1,31 @@
+import { PlaywrightTestConfig, devices } from '@playwright/test'
+import { Fixtures } from './e2e/base-test'
+
+const config: PlaywrightTestConfig<Fixtures> = {
+  forbidOnly: true,
+  retries: 0,
+  testDir: './e2e',
+  globalSetup: require.resolve('./playwright-staging-setup'),
+  globalTimeout: 15 * 60 * 1000,
+  timeout: 60 * 1000,
+  expect: {
+    timeout: 10 * 1000,
+  },
+  use: {
+    trace: 'on-first-retry',
+    baseURL: 'https://staging.kelas.rumahberbagi.com',
+    actionTimeout: 15 * 1000,
+    navigationTimeout: 30 * 1000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+  ],
+}
+export default config