feat(e2e): add Playwright + MSW testing infrastructure

- Add Playwright config with auth setup (cookie injection for MSW)
- Configure MSW with t3-env (@t3-oss/env-nextjs) for type-safe env vars
- Add MSW handlers for Supabase Auth, PostgREST, and GitHub API
- Add MSWProvider for client-side initialization
- Add server-side MSW init in layout.tsx
- Add E2E tests for landing, login, boards, kanban, and settings pages
- Add GitHub Actions CI workflow with parallel jobs
- Add asymmetric MSW activation (client/server safety)

Reference: https://github.com/laststance/next-msw-integration

Author: ryota-murakami

.github/workflows/ci.yml

@@ -0,0 +1,79 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  # Test environment configuration
+  NEXT_PUBLIC_SUPABASE_URL: https://jqtxjzdxczqwsrvevmyk.supabase.co
+  NEXT_PUBLIC_SUPABASE_ANON_KEY: test-anon-key
+  NEXT_PUBLIC_ENABLE_MSW_MOCK: 'true'
+  APP_ENV: test
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm lint
+      - run: pnpm typecheck
+
+  unit-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm test run --project unit
+
+  e2e-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+      - run: pnpm install --frozen-lockfile
+      - name: Install Playwright Browsers
+        run: pnpm exec playwright install --with-deps chromium
+      - name: Run E2E Tests
+        run: pnpm test:e2e
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm build
+        env:
+          NEXT_PUBLIC_ENABLE_MSW_MOCK: 'false'

.gitignore

@@ -66,6 +66,7 @@ storybook-static/
 test-results/
 playwright-report/
 playwright/.cache/
+tests/e2e/.auth/*.json
 
 *storybook.log
 

app/auth/callback/route.ts

@@ -13,11 +13,9 @@ import { cookies } from 'next/headers'
 import { NextResponse } from 'next/server'
 
 import { createFirstBoardIfNeeded } from '@/lib/actions/board'
+import { getGitHubTokenCookieName } from '@/lib/constants/cookies'
 import { createRouteHandlerClient } from '@/lib/supabase/server'
 
-// Cookie name
-const GITHUB_TOKEN_COOKIE = 'github_provider_token'
-
 export async function GET(request: Request) {
   const { searchParams, origin } = new URL(request.url)
   const code = searchParams.get('code')
@@ -58,14 +56,15 @@ export async function GET(request: Request) {
       const providerToken = data.session?.provider_token
       if (providerToken) {
         const cookieStore = await cookies()
-        cookieStore.set(GITHUB_TOKEN_COOKIE, providerToken, {
+        const cookieName = getGitHubTokenCookieName()
+        cookieStore.set(cookieName, providerToken, {
           httpOnly: true,
           secure: process.env.NODE_ENV === 'production',
           sameSite: 'lax',
           maxAge: 60 * 60 * 24 * 7, // 7 days (adjust to match GitHub token expiration)
           path: '/',
         })
-        console.log('GitHub provider_token saved to cookie')
+        console.log(`GitHub provider_token saved to cookie: ${cookieName}`)
       } else {
         console.warn(
           'No provider_token in session - GitHub API access may be limited',

app/layout.tsx

@@ -5,6 +5,7 @@
  * - Redux Provider
  * - Theme application
  * - Global keyboard shortcuts (ShortcutsHelp)
+ * - MSW initialization (server-side for SSR, client-side via MSWProvider)
  */
 
 import '@/styles/globals.css'
@@ -30,6 +31,23 @@ import { CommandPalette } from '@/components/CommandPalette/CommandPalette'
 import { ShortcutsHelp } from '@/components/ShortcutsHelp'
 import { Providers } from '@/lib/redux/providers'
 
+import { MSWProvider } from './msw-provider'
+
+// Server-side MSW initialization
+// This runs at module load time for Node.js runtime only
+// Must be at the TOP of the file, before any components render
+if (process.env.NEXT_RUNTIME === 'nodejs') {
+  // Dynamic import to avoid bundling MSW in client bundle
+  const initMSW = async () => {
+    const { isMSWEnabled } = await import('@/lib/utils/isMSWEnabled')
+    if (isMSWEnabled()) {
+      const { server } = await import('../mocks/server')
+      server.listen({ onUnhandledRequest: 'bypass' })
+    }
+  }
+  initMSW()
+}
+
 export default function RootLayout({
   children,
 }: {
@@ -48,10 +66,12 @@ export default function RootLayout({
       </head>
       <body>
         <Providers>
-          {children}
-          <ShortcutsHelp />
-          <CommandPalette />
-          <Toaster richColors position="bottom-right" />
+          <MSWProvider>
+            {children}
+            <ShortcutsHelp />
+            <CommandPalette />
+            <Toaster richColors position="bottom-right" />
+          </MSWProvider>
         </Providers>
       </body>
     </html>

app/msw-provider.tsx

@@ -0,0 +1,82 @@
+/**
+ * MSW Provider Component
+ *
+ * Client component that initializes Mock Service Worker before rendering children.
+ * Uses useLayoutEffect to ensure MSW is ready before any fetch requests.
+ *
+ * @description
+ * - Blocks rendering until MSW is initialized (prevents race conditions)
+ * - Dynamically imports mocks/browser.ts only when needed
+ * - Shows loading state during initialization
+ * - Gracefully handles initialization failures
+ *
+ * @see https://mswjs.io/docs/integrations/react
+ */
+'use client'
+
+import { memo, useLayoutEffect, useState } from 'react'
+
+import { isMSWEnabled } from '@/lib/utils/isMSWEnabled'
+
+type MSWProviderProps = Readonly<{
+  children: React.ReactNode
+}>
+
+/**
+ * Wraps children with MSW initialization logic
+ *
+ * @param children - React children to render after MSW is ready
+ * @returns Children after MSW initialization, or loading state during init
+ *
+ * @example
+ * // In layout.tsx:
+ * <MSWProvider>{children}</MSWProvider>
+ */
+function MSWProviderComponent({ children }: MSWProviderProps): React.ReactNode {
+  const [isMSWReady, setIsMSWReady] = useState(false)
+
+  useLayoutEffect(() => {
+    const enabled = isMSWEnabled()
+
+    // If MSW is not enabled or we're not in the browser, skip initialization
+    if (!enabled || typeof window === 'undefined') {
+      setIsMSWReady(true)
+      return
+    }
+
+    // Dynamically import browser worker to avoid bundling in production
+    import('../mocks/browser')
+      .then(async ({ worker }) => {
+        try {
+          await worker.start({
+            // 'bypass' allows unhandled requests to pass through to the network
+            // Change to 'warn' or 'error' to debug missing handlers
+            onUnhandledRequest: 'bypass',
+          })
+          setIsMSWReady(true)
+        } catch {
+          // Worker failed to start, but we should still render the app
+          // This can happen if Service Worker is not supported
+          setIsMSWReady(true)
+        }
+      })
+      .catch(() => {
+        // Import failed, but we should still render the app
+        setIsMSWReady(true)
+      })
+  }, [])
+
+  // Block rendering until MSW is ready to prevent race conditions
+  // where fetch requests are made before MSW can intercept them
+  if (isMSWEnabled() && !isMSWReady) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <p className="text-lg">Initializing MSW...</p>
+      </div>
+    )
+  }
+
+  return children
+}
+
+export const MSWProvider = memo(MSWProviderComponent)

components/Modals/StatusListDialog.tsx

@@ -130,11 +130,16 @@ export const StatusListDialog = memo(function StatusListDialog({
             <Label htmlFor="status-name">Name</Label>
             <Input
               id="status-name"
+              name="status-column-title"
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="e.g., In Progress, Review"
               maxLength={50}
               autoFocus
+              autoComplete="off"
+              data-1p-ignore
+              data-lpignore="true"
+              data-form-type="other"
             />
           </div>
 

lib/actions/github.ts

@@ -9,8 +9,9 @@
 
 import { cookies } from 'next/headers'
 
+import { getGitHubTokenCookieName } from '@/lib/constants/cookies'
+
 const GITHUB_API_BASE_URL = 'https://api.github.com'
-const GITHUB_TOKEN_COOKIE = 'github_provider_token'
 
 export interface GitHubRepository {
   id: number
@@ -38,7 +39,8 @@ export interface GitHubRepository {
  */
 async function getGitHubToken(): Promise<string | null> {
   const cookieStore = await cookies()
-  return cookieStore.get(GITHUB_TOKEN_COOKIE)?.value ?? null
+  const cookieName = getGitHubTokenCookieName()
+  return cookieStore.get(cookieName)?.value ?? null
 }
 
 /**

lib/constants/cookies.ts

@@ -0,0 +1,28 @@
+/**
+ * Cookie Name Constants
+ *
+ * Environment-specific cookie names to prevent conflicts
+ * when running dev and prod environments on localhost.
+ */
+
+/**
+ * Get environment-specific GitHub token cookie name
+ *
+ * Uses Supabase project ID (first 8 chars) to differentiate between environments.
+ * This prevents cookie conflicts when switching between dev/prod on localhost.
+ *
+ * @returns Cookie name like "gh_token_jqtxjzdx" (dev) or "gh_token_mfeesjmt" (prod)
+ * @example
+ * // Dev: https://jqtxjzdxczqwsrvevmyk.supabase.co
+ * getGitHubTokenCookieName() // => "gh_token_jqtxjzdx"
+ *
+ * // Prod: https://mfeesjmtofgayktirswf.supabase.co
+ * getGitHubTokenCookieName() // => "gh_token_mfeesjmt"
+ */
+export function getGitHubTokenCookieName(): string {
+  const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL || ''
+  // Extract project ID from URL: https://PROJECT_ID.supabase.co
+  const match = supabaseUrl.match(/https:\/\/([a-z0-9]+)\.supabase\.co/)
+  const projectId = match?.[1]?.slice(0, 8) || 'default'
+  return `gh_token_${projectId}`
+}

lib/env.ts

@@ -0,0 +1,73 @@
+/**
+ * Environment Variables Schema (t3-env)
+ *
+ * Type-safe environment variable validation using @t3-oss/env-nextjs.
+ * Provides runtime validation and TypeScript types for all env vars.
+ *
+ * @description
+ * - NEXT_PUBLIC_* vars are exposed to the browser (client section)
+ * - Server vars are only available on the server (server section)
+ * - APP_ENV distinguishes test from development (NODE_ENV is auto-set to 'production' after build)
+ * - NEXT_PUBLIC_ENABLE_MSW_MOCK controls MSW activation
+ */
+import { createEnv } from '@t3-oss/env-nextjs'
+import { z } from 'zod'
+
+export const env = createEnv({
+  /**
+   * Server-side environment variables schema.
+   * These are only available on the server.
+   */
+  server: {
+    NODE_ENV: z
+      .enum(['development', 'test', 'production'])
+      .default('development'),
+    // APP_ENV is separate from NODE_ENV because Next.js sets NODE_ENV to 'production'
+    // after running `next build`, regardless of the actual deployment target.
+    // This allows MSW mocking in production builds for E2E testing.
+    APP_ENV: z
+      .enum(['development', 'test', 'production'])
+      .optional()
+      .default('development'),
+  },
+
+  /**
+   * Client-side environment variables schema.
+   * These are exposed to the browser via NEXT_PUBLIC_ prefix.
+   */
+  client: {
+    NEXT_PUBLIC_SUPABASE_URL: z.string().min(1),
+    NEXT_PUBLIC_SUPABASE_ANON_KEY: z.string().min(1),
+    // MSW activation flag - only check this on client side
+    // Server also requires APP_ENV=test for activation
+    NEXT_PUBLIC_ENABLE_MSW_MOCK: z
+      .string()
+      .optional()
+      .default('false')
+      .transform((val) => val === 'true'),
+  },
+
+  /**
+   * Runtime environment variables.
+   * For Next.js >= 13.4.4, you need to destructure manually.
+   */
+  runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+    APP_ENV: process.env.APP_ENV,
+    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
+    NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
+    NEXT_PUBLIC_ENABLE_MSW_MOCK: process.env.NEXT_PUBLIC_ENABLE_MSW_MOCK,
+  },
+
+  /**
+   * Skip validation in certain environments.
+   * Set SKIP_ENV_VALIDATION=1 to skip validation (useful for Docker builds).
+   */
+  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
+
+  /**
+   * Treat empty strings as undefined.
+   * Useful for optional env vars that might be set to empty string.
+   */
+  emptyStringAsUndefined: true,
+})