feat: Implement Playwright testing setup

2025-12-20 02:51:12 -05:00 · 2025-10-30 15:42:28 +00:00
parent 41ae88d1bc
commit 8ac61e01e3
16 changed files with 1700 additions and 0 deletions
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -0,0 +1,81 @@
+name: Playwright E2E Tests
+
+on:
+  push:
+    branches: [main, develop]
+  pull_request:
+    branches: [main, develop]
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    
+    strategy:
+      fail-fast: false
+      matrix:
+        browser: [chromium, firefox, webkit]
+    
+    steps:
+      - uses: actions/checkout@v4
+      
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+      
+      - name: Install dependencies
+        run: npm ci
+      
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps ${{ matrix.browser }}
+      
+      - name: Run Playwright tests
+        env:
+          SUPABASE_SERVICE_ROLE_KEY: ${{ secrets.SUPABASE_SERVICE_ROLE_KEY }}
+          TEST_USER_EMAIL: ${{ secrets.TEST_USER_EMAIL }}
+          TEST_USER_PASSWORD: ${{ secrets.TEST_USER_PASSWORD }}
+          TEST_MODERATOR_EMAIL: ${{ secrets.TEST_MODERATOR_EMAIL }}
+          TEST_MODERATOR_PASSWORD: ${{ secrets.TEST_MODERATOR_PASSWORD }}
+          BASE_URL: ${{ secrets.BASE_URL || 'http://localhost:8080' }}
+        run: npx playwright test --project=${{ matrix.browser }}
+      
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-results-${{ matrix.browser }}
+          path: test-results/
+          retention-days: 30
+      
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report-${{ matrix.browser }}
+          path: playwright-report/
+          retention-days: 30
+      
+      - name: Comment PR with results
+        uses: daun/playwright-report-comment@v3
+        if: always() && github.event_name == 'pull_request'
+        with:
+          report-path: test-results.json
+
+  test-summary:
+    name: Test Summary
+    runs-on: ubuntu-latest
+    needs: test
+    if: always()
+    
+    steps:
+      - name: Download all artifacts
+        uses: actions/download-artifact@v4
+      
+      - name: Generate summary
+        run: |
+          echo "## Playwright Test Results" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "Tests completed across all browsers." >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "See artifacts for detailed reports and screenshots." >> $GITHUB_STEP_SUMMARY
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,12 +11,14 @@
        "@dnd-kit/core": "^6.3.1",
        "@dnd-kit/sortable": "^10.0.0",
        "@dnd-kit/utilities": "^3.2.2",
+        "@faker-js/faker": "^10.1.0",
        "@hookform/resolvers": "^3.10.0",
        "@marsidev/react-turnstile": "^1.3.1",
        "@mdxeditor/editor": "^3.47.0",
        "@novu/headless": "^2.6.6",
        "@novu/node": "^2.6.6",
        "@novu/react": "^3.10.1",
+        "@playwright/test": "^1.56.1",
        "@radix-ui/react-accordion": "^1.2.11",
        "@radix-ui/react-alert-dialog": "^1.1.14",
        "@radix-ui/react-aspect-ratio": "^1.1.7",
@@ -1396,6 +1398,22 @@
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      }
    },
+    "node_modules/@faker-js/faker": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-10.1.0.tgz",
+      "integrity": "sha512-C3mrr3b5dRVlKPJdfrAXS8+dq+rq8Qm5SNRazca0JKgw1HQERFmrVb0towvMmw5uu8hHKNiQasMaR/tydf3Zsg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fakerjs"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || ^23.5.0 || >=24.0.0",
+        "npm": ">=10"
+      }
+    },
    "node_modules/@fastify/busboy": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-2.1.1.tgz",
@@ -2400,6 +2418,21 @@
        "node": ">=14"
      }
    },
+    "node_modules/@playwright/test": {
+      "version": "1.56.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.1.tgz",
+      "integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.56.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
    "node_modules/@radix-ui/colors": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0.tgz",
@@ -10226,6 +10259,50 @@
        "node": ">= 6"
      }
    },
+    "node_modules/playwright": {
+      "version": "1.56.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.1.tgz",
+      "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.56.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.56.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.1.tgz",
+      "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.5.6",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
--- a/package.json
+++ b/package.json
@@ -14,12 +14,14 @@
    "@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
+    "@faker-js/faker": "^10.1.0",
    "@hookform/resolvers": "^3.10.0",
    "@marsidev/react-turnstile": "^1.3.1",
    "@mdxeditor/editor": "^3.47.0",
    "@novu/headless": "^2.6.6",
    "@novu/node": "^2.6.6",
    "@novu/react": "^3.10.1",
+    "@playwright/test": "^1.56.1",
    "@radix-ui/react-accordion": "^1.2.11",
    "@radix-ui/react-alert-dialog": "^1.1.14",
    "@radix-ui/react-aspect-ratio": "^1.1.7",
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -0,0 +1,132 @@
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Playwright Configuration for ThrillWiki E2E Tests
+ * 
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ['html'],
+    ['list'],
+    ['json', { outputFile: 'test-results.json' }]
+  ],
+  
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: process.env.BASE_URL || 'http://localhost:8080',
+    
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    
+    /* Screenshot on failure */
+    screenshot: 'only-on-failure',
+    
+    /* Video on failure */
+    video: 'retain-on-failure',
+    
+    /* Maximum time each action such as `click()` can take */
+    actionTimeout: 10000,
+  },
+
+  /* Global timeout for each test */
+  timeout: 60000,
+
+  /* Global setup and teardown */
+  globalSetup: './tests/setup/global-setup.ts',
+  globalTeardown: './tests/setup/global-teardown.ts',
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { 
+        ...devices['Desktop Chrome'],
+        // Use authenticated state for most tests
+        storageState: '.auth/user.json',
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: { 
+        ...devices['Desktop Firefox'],
+        storageState: '.auth/user.json',
+      },
+    },
+
+    {
+      name: 'webkit',
+      use: { 
+        ...devices['Desktop Safari'],
+        storageState: '.auth/user.json',
+      },
+    },
+
+    /* Test against mobile viewports. */
+    {
+      name: 'Mobile Chrome',
+      use: { 
+        ...devices['Pixel 5'],
+        storageState: '.auth/user.json',
+      },
+    },
+    {
+      name: 'Mobile Safari',
+      use: { 
+        ...devices['iPhone 12'],
+        storageState: '.auth/user.json',
+      },
+    },
+
+    /* Tests that require specific user roles */
+    {
+      name: 'moderator',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: '.auth/moderator.json',
+      },
+    },
+    {
+      name: 'admin',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: '.auth/admin.json',
+      },
+    },
+
+    /* Authentication tests run without pre-authenticated state */
+    {
+      name: 'auth-tests',
+      testMatch: '**/auth/**/*.spec.ts',
+      use: {
+        ...devices['Desktop Chrome'],
+        // No storageState for auth tests
+      },
+    },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'npm run dev',
+    url: 'http://localhost:8080',
+    reuseExistingServer: !process.env.CI,
+    timeout: 120000,
+  },
+});
--- a/tests/README.md
+++ b/tests/README.md
@@ -0,0 +1,237 @@
+# ThrillWiki E2E Testing with Playwright
+
+This directory contains comprehensive end-to-end tests for ThrillWiki using Playwright.
+
+## Overview
+
+These tests replace the problematic backend integration tests with proper browser-based E2E tests that:
+- ✅ Test the actual user experience
+- ✅ Respect security policies (RLS)
+- ✅ Validate the complete submission → moderation → approval flow
+- ✅ Run in real browsers (Chromium, Firefox, WebKit)
+- ✅ Support parallel execution for speed
+- ✅ Capture videos and screenshots on failure
+
+## Directory Structure
+
+```
+tests/
+├── e2e/                          # End-to-end test specs
+│   ├── auth/                     # Authentication tests
+│   ├── submission/               # Entity submission tests
+│   ├── moderation/               # Moderation queue tests
+│   ├── versioning/               # Version history tests
+│   ├── admin/                    # Admin panel tests
+│   └── public/                   # Public browsing tests
+├── fixtures/                     # Test fixtures and helpers
+│   ├── auth.ts                   # Authentication helpers
+│   ├── database.ts               # Direct DB access for setup/teardown
+│   └── test-data.ts              # Test data generators
+├── helpers/                      # Utility functions
+│   └── page-objects/             # Page Object Models
+├── setup/                        # Global setup and teardown
+│   ├── global-setup.ts           # Runs before all tests
+│   └── global-teardown.ts        # Runs after all tests
+└── README.md                     # This file
+```
+
+## Prerequisites
+
+1. **Node.js** and **npm** installed
+2. **Supabase service role key** for test setup/teardown:
+   ```bash
+   export SUPABASE_SERVICE_ROLE_KEY="your-service-role-key"
+   ```
+3. **Test users** (optional, will be auto-created):
+   ```bash
+   export TEST_USER_EMAIL="test-user@thrillwiki.test"
+   export TEST_USER_PASSWORD="TestUser123!"
+   export TEST_MODERATOR_EMAIL="test-moderator@thrillwiki.test"
+   export TEST_MODERATOR_PASSWORD="TestModerator123!"
+   ```
+
+## Installation
+
+```bash
+# Install Playwright and browsers
+npm install
+npx playwright install
+```
+
+## Running Tests
+
+### All tests
+```bash
+npx playwright test
+```
+
+### Specific test file
+```bash
+npx playwright test tests/e2e/auth/login.spec.ts
+```
+
+### Specific test suite
+```bash
+npx playwright test tests/e2e/submission/
+```
+
+### Run in headed mode (see browser)
+```bash
+npx playwright test --headed
+```
+
+### Run in UI mode (interactive)
+```bash
+npx playwright test --ui
+```
+
+### Run with specific browser
+```bash
+npx playwright test --project=chromium
+npx playwright test --project=firefox
+npx playwright test --project=webkit
+```
+
+### Run tests with specific user role
+```bash
+npx playwright test --project=moderator
+npx playwright test --project=admin
+```
+
+## Debugging Tests
+
+### Debug mode
+```bash
+npx playwright test --debug
+```
+
+### Show test report
+```bash
+npx playwright show-report
+```
+
+### View trace for failed test
+```bash
+npx playwright show-trace trace.zip
+```
+
+## Writing New Tests
+
+### 1. Create a test file
+```typescript
+// tests/e2e/feature/my-feature.spec.ts
+import { test, expect } from '@playwright/test';
+
+test.describe('My Feature', () => {
+  test('should do something', async ({ page }) => {
+    await page.goto('/my-feature');
+    await expect(page.getByText('Hello')).toBeVisible();
+  });
+});
+```
+
+### 2. Use Page Objects (recommended)
+```typescript
+import { MyFeaturePage } from '../../helpers/page-objects/MyFeaturePage';
+
+test('should use page object', async ({ page }) => {
+  const myFeature = new MyFeaturePage(page);
+  await myFeature.goto();
+  await myFeature.doSomething();
+  await myFeature.expectSuccess();
+});
+```
+
+### 3. Use test data generators
+```typescript
+import { generateParkData } from '../../fixtures/test-data';
+
+test('should create park', async ({ page }) => {
+  const parkData = generateParkData({ name: 'Custom Park' });
+  // Use parkData in your test
+});
+```
+
+### 4. Clean up test data
+```typescript
+import { cleanupTestData } from '../../fixtures/database';
+
+test.afterAll(async () => {
+  await cleanupTestData();
+});
+```
+
+## Test Data Management
+
+All test data is automatically marked with `is_test_data: true` and cleaned up after tests run.
+
+### Manual cleanup
+If tests fail and leave data behind:
+```typescript
+import { cleanupTestData } from './fixtures/database';
+await cleanupTestData();
+```
+
+Or use the "Emergency Cleanup" button in the admin UI at `/admin/settings`.
+
+## Authentication
+
+Tests use pre-authenticated browser contexts to avoid logging in for every test:
+
+- `.auth/user.json` - Regular user
+- `.auth/moderator.json` - Moderator with AAL2
+- `.auth/admin.json` - Admin with AAL2
+- `.auth/superuser.json` - Superuser with AAL2
+
+These are created automatically during global setup.
+
+## CI/CD Integration
+
+Tests run automatically on GitHub Actions:
+- On every pull request
+- On push to main branch
+- Results posted as PR comments
+
+See `.github/workflows/playwright.yml` for configuration.
+
+## Best Practices
+
+1. **Use Page Objects** - Encapsulate page interactions
+2. **Mark test data** - Always set `is_test_data: true`
+3. **Clean up** - Use `test.afterAll()` or `test.afterEach()`
+4. **Use fixtures** - Reuse auth, database, and test data helpers
+5. **Test user flows** - Not individual functions
+6. **Avoid hardcoded waits** - Use `waitForLoadState()` or `waitForSelector()`
+7. **Take screenshots** - On failure (automatic)
+8. **Parallelize** - Tests run in parallel by default
+
+## Common Issues
+
+### "Service role key not configured"
+Set the `SUPABASE_SERVICE_ROLE_KEY` environment variable.
+
+### "Test data not cleaned up"
+Run `npx playwright test --project=cleanup` or use the admin UI emergency cleanup button.
+
+### "Lock timeout"
+Some tests involving moderation locks may take longer. Increase timeout:
+```typescript
+test('my slow test', async ({ page }) => {
+  test.setTimeout(120000); // 2 minutes
+  // ...
+});
+```
+
+## Resources
+
+- [Playwright Documentation](https://playwright.dev/)
+- [Playwright Best Practices](https://playwright.dev/docs/best-practices)
+- [ThrillWiki Testing Guide](../docs/TESTING_GUIDE.md)
+
+## Support
+
+For questions or issues with tests, check:
+1. This README
+2. Playwright docs
+3. Test failure screenshots/videos in `test-results/`
+4. GitHub Actions logs for CI failures
--- a/tests/e2e/auth/login.spec.ts
+++ b/tests/e2e/auth/login.spec.ts
@@ -0,0 +1,134 @@
+/**
+ * Login E2E Tests
+ * 
+ * Tests authentication flow, session persistence, and error handling.
+ */
+
+import { test, expect } from '@playwright/test';
+import { LoginPage } from '../../helpers/page-objects/LoginPage';
+import { getTestUserCredentials, logout } from '../../fixtures/auth';
+
+// These tests run without pre-authenticated state
+test.use({ storageState: { cookies: [], origins: [] } });
+
+test.describe('Login Flow', () => {
+  let loginPage: LoginPage;
+
+  test.beforeEach(async ({ page }) => {
+    loginPage = new LoginPage(page);
+    await loginPage.goto();
+  });
+
+  test('should login successfully with valid credentials', async ({ page }) => {
+    const { email, password } = getTestUserCredentials('user');
+    
+    await loginPage.login(email, password);
+    await loginPage.expectLoginSuccess();
+    
+    // Verify we're redirected to homepage
+    await expect(page).toHaveURL('/');
+  });
+
+  test('should show error with invalid password', async ({ page }) => {
+    const { email } = getTestUserCredentials('user');
+    
+    await loginPage.login(email, 'wrongpassword123');
+    await loginPage.expectLoginError();
+    
+    // Verify we're still on auth page
+    await expect(page).toHaveURL(/\/auth/);
+  });
+
+  test('should show error with non-existent email', async ({ page }) => {
+    await loginPage.login('nonexistent@example.com', 'password123');
+    await loginPage.expectLoginError();
+  });
+
+  test('should persist session after page refresh', async ({ page }) => {
+    const { email, password } = getTestUserCredentials('user');
+    
+    // Login
+    await loginPage.login(email, password);
+    await loginPage.expectLoginSuccess();
+    
+    // Reload page
+    await page.reload();
+    
+    // Should still be logged in (not redirected to /auth)
+    await expect(page).not.toHaveURL(/\/auth/);
+  });
+
+  test('should clear session on logout', async ({ page }) => {
+    const { email, password } = getTestUserCredentials('user');
+    
+    // Login
+    await loginPage.login(email, password);
+    await loginPage.expectLoginSuccess();
+    
+    // Logout
+    await page.click('button:has-text("Logout")').or(page.click('[data-testid="logout"]'));
+    
+    // Should be redirected to auth or homepage
+    // And trying to access protected route should redirect to auth
+    await page.goto('/moderation/queue');
+    await expect(page).toHaveURL(/\/auth/);
+  });
+
+  test('should validate email format', async ({ page }) => {
+    await loginPage.login('invalid-email', 'password123');
+    
+    // Should show validation error
+    await expect(page.getByText(/invalid.*email/i)).toBeVisible();
+  });
+
+  test('should require password', async ({ page }) => {
+    const { email } = getTestUserCredentials('user');
+    
+    await page.fill('input[type="email"]', email);
+    await page.click('button[type="submit"]');
+    
+    // Should show validation error
+    await expect(page.getByText(/password.*required/i)).toBeVisible();
+  });
+});
+
+test.describe('Role-Based Access', () => {
+  test('moderator can access moderation queue', async ({ browser }) => {
+    const context = await browser.newContext({ storageState: '.auth/moderator.json' });
+    const page = await context.newPage();
+    
+    await page.goto('/moderation/queue');
+    
+    // Should not be redirected
+    await expect(page).toHaveURL(/\/moderation\/queue/);
+    
+    // Page should load successfully
+    await expect(page.getByText(/moderation.*queue/i)).toBeVisible();
+    
+    await context.close();
+  });
+
+  test('regular user cannot access moderation queue', async ({ browser }) => {
+    const context = await browser.newContext({ storageState: '.auth/user.json' });
+    const page = await context.newPage();
+    
+    await page.goto('/moderation/queue');
+    
+    // Should be redirected or see access denied
+    await expect(page.getByText(/access denied/i).or(page.getByText(/not authorized/i))).toBeVisible();
+    
+    await context.close();
+  });
+
+  test('admin can access admin panel', async ({ browser }) => {
+    const context = await browser.newContext({ storageState: '.auth/admin.json' });
+    const page = await context.newPage();
+    
+    await page.goto('/admin/users');
+    
+    // Should not be redirected
+    await expect(page).toHaveURL(/\/admin/);
+    
+    await context.close();
+  });
+});
--- a/tests/e2e/moderation/approval-flow.spec.ts
+++ b/tests/e2e/moderation/approval-flow.spec.ts
@@ -0,0 +1,139 @@
+/**
+ * Moderation Approval Flow E2E Tests
+ * 
+ * Tests the complete submission approval process.
+ */
+
+import { test, expect } from '@playwright/test';
+import { ModerationQueuePage } from '../../helpers/page-objects/ModerationQueuePage';
+import { ParkCreationPage } from '../../helpers/page-objects/ParkCreationPage';
+import { generateParkData, generateTestId } from '../../fixtures/test-data';
+import { queryDatabase, cleanupTestData, waitForVersion } from '../../fixtures/database';
+
+test.describe('Submission Approval Flow', () => {
+  test.afterAll(async () => {
+    await cleanupTestData();
+  });
+
+  test('should approve park submission and create entity', async ({ browser }) => {
+    // Step 1: Create submission as regular user
+    const userContext = await browser.newContext({ storageState: '.auth/user.json' });
+    const userPage = await userContext.newPage();
+    
+    const parkData = generateParkData({
+      name: `Test Park ${generateTestId()}`,
+    });
+
+    const parkCreationPage = new ParkCreationPage(userPage);
+    await parkCreationPage.goto();
+    await parkCreationPage.fillBasicInfo(parkData.name, parkData.description);
+    await parkCreationPage.submitForm();
+    await parkCreationPage.expectSuccess();
+    
+    await userContext.close();
+
+    // Step 2: Approve as moderator
+    const modContext = await browser.newContext({ storageState: '.auth/moderator.json' });
+    const modPage = await modContext.newPage();
+    
+    const moderationPage = new ModerationQueuePage(modPage);
+    await moderationPage.goto();
+
+    // Find the submission
+    await moderationPage.expectSubmissionVisible(parkData.name);
+
+    // Claim it
+    await moderationPage.claimSubmission(0);
+
+    // Approve it
+    await moderationPage.approveSubmission('Looks good!');
+
+    // Step 3: Verify entity created in database
+    await modPage.waitForTimeout(2000); // Give DB time to process
+
+    const parks = await queryDatabase('parks', (qb) =>
+      qb.select('*').eq('name', parkData.name)
+    );
+
+    expect(parks).toHaveLength(1);
+    expect(parks[0].is_test_data).toBe(true);
+
+    // Step 4: Verify version created
+    const versions = await queryDatabase('park_versions', (qb) =>
+      qb.select('*').eq('park_id', parks[0].id).eq('version_number', 1)
+    );
+
+    expect(versions).toHaveLength(1);
+    expect(versions[0].change_type).toBe('created');
+
+    // Step 5: Verify submission marked as approved
+    const submissions = await queryDatabase('content_submissions', (qb) =>
+      qb.select('*').eq('entity_type', 'park').contains('submission_data', { name: parkData.name })
+    );
+
+    expect(submissions[0].status).toBe('approved');
+    expect(submissions[0].approved_by).toBeTruthy();
+    expect(submissions[0].approved_at).toBeTruthy();
+
+    // Step 6: Verify lock released
+    expect(submissions[0].assigned_to).toBeNull();
+    expect(submissions[0].locked_until).toBeNull();
+
+    await modContext.close();
+  });
+
+  test('should show change comparison for edits', async ({ browser }) => {
+    // This test would require:
+    // 1. Creating and approving a park
+    // 2. Editing the park
+    // 3. Viewing the edit in moderation queue
+    // 4. Verifying change comparison displays
+    // Left as TODO - requires more complex setup
+  });
+
+  test('should send notification to submitter on approval', async ({ browser }) => {
+    // This test would verify that Novu notification is sent
+    // Left as TODO - requires Novu testing setup
+  });
+
+  test('should prevent approval without lock', async ({ browser }) => {
+    // Create submission as user
+    const userContext = await browser.newContext({ storageState: '.auth/user.json' });
+    const userPage = await userContext.newPage();
+    
+    const parkData = generateParkData({
+      name: `Test Park ${generateTestId()}`,
+    });
+
+    const parkCreationPage = new ParkCreationPage(userPage);
+    await parkCreationPage.goto();
+    await parkCreationPage.fillBasicInfo(parkData.name, parkData.description);
+    await parkCreationPage.submitForm();
+    await parkCreationPage.expectSuccess();
+    
+    await userContext.close();
+
+    // Try to approve as moderator WITHOUT claiming
+    const modContext = await browser.newContext({ storageState: '.auth/moderator.json' });
+    const modPage = await modContext.newPage();
+    
+    const moderationPage = new ModerationQueuePage(modPage);
+    await moderationPage.goto();
+
+    // Approve button should be disabled or not visible
+    const approveButton = modPage.locator('button:has-text("Approve")').first();
+    await expect(approveButton).toBeDisabled();
+
+    await modContext.close();
+  });
+});
+
+test.describe('Bulk Approval', () => {
+  test('should approve all items in submission', async ({ browser }) => {
+    // TODO: Test approving all submission items at once
+  });
+
+  test('should allow selective item approval', async ({ browser }) => {
+    // TODO: Test approving only specific items from a submission
+  });
+});
--- a/tests/e2e/submission/park-creation.spec.ts
+++ b/tests/e2e/submission/park-creation.spec.ts
@@ -0,0 +1,138 @@
+/**
+ * Park Creation E2E Tests
+ * 
+ * Tests the complete park submission flow through the UI.
+ */
+
+import { test, expect } from '@playwright/test';
+import { ParkCreationPage } from '../../helpers/page-objects/ParkCreationPage';
+import { generateParkData, generateTestId } from '../../fixtures/test-data';
+import { queryDatabase, cleanupTestData } from '../../fixtures/database';
+
+test.describe('Park Creation Flow', () => {
+  let parkCreationPage: ParkCreationPage;
+
+  test.beforeEach(async ({ page }) => {
+    parkCreationPage = new ParkCreationPage(page);
+    await parkCreationPage.goto();
+  });
+
+  test.afterAll(async () => {
+    // Clean up test data
+    await cleanupTestData();
+  });
+
+  test('should create park submission successfully', async ({ page }) => {
+    const parkData = generateParkData({
+      name: `Test Park ${generateTestId()}`,
+    });
+
+    // Fill form
+    await parkCreationPage.fillBasicInfo(parkData.name, parkData.description);
+    await parkCreationPage.selectParkType(parkData.park_type);
+    await parkCreationPage.selectStatus(parkData.status);
+    await parkCreationPage.setOpeningDate(parkData.opened_date);
+
+    // Submit
+    await parkCreationPage.submitForm();
+    await parkCreationPage.expectSuccess();
+
+    // Verify submission created in database
+    const submissions = await queryDatabase('content_submissions', (qb) =>
+      qb.select('*').eq('entity_type', 'park').eq('is_test_data', true).order('created_at', { ascending: false }).limit(1)
+    );
+
+    expect(submissions).toHaveLength(1);
+    expect(submissions[0].status).toBe('pending');
+
+    // Verify NO park created yet (should be in moderation queue)
+    const parks = await queryDatabase('parks', (qb) =>
+      qb.select('*').eq('slug', parkData.slug)
+    );
+
+    expect(parks).toHaveLength(0);
+  });
+
+  test('should validate required fields', async ({ page }) => {
+    // Try to submit empty form
+    await parkCreationPage.submitForm();
+
+    // Should show validation errors
+    await parkCreationPage.expectValidationError('Name is required');
+  });
+
+  test('should auto-generate slug from name', async ({ page }) => {
+    const parkName = `Amazing Theme Park ${generateTestId()}`;
+    
+    await page.fill('input[name="name"]', parkName);
+    
+    // Wait for slug to auto-generate
+    await page.waitForTimeout(500);
+    
+    const slugValue = await page.inputValue('input[name="slug"]');
+    expect(slugValue).toContain('amazing-theme-park');
+    expect(slugValue).not.toContain(' '); // No spaces
+  });
+
+  test('should support custom date precision', async ({ page }) => {
+    const parkData = generateParkData({
+      name: `Test Park ${generateTestId()}`,
+    });
+
+    await parkCreationPage.fillBasicInfo(parkData.name, parkData.description);
+    await parkCreationPage.setOpeningDate('2020-01-01', 'year');
+
+    await parkCreationPage.submitForm();
+    await parkCreationPage.expectSuccess();
+
+    // Verify date precision in submission
+    const submissions = await queryDatabase('content_submissions', (qb) =>
+      qb.select('submission_data').eq('entity_type', 'park').eq('is_test_data', true).order('created_at', { ascending: false }).limit(1)
+    );
+
+    const submissionData = submissions[0].submission_data;
+    expect(submissionData.opened_date_precision).toBe('year');
+  });
+
+  test('should display submission in user profile', async ({ page }) => {
+    const parkData = generateParkData({
+      name: `Test Park ${generateTestId()}`,
+    });
+
+    // Create submission
+    await parkCreationPage.fillBasicInfo(parkData.name, parkData.description);
+    await parkCreationPage.submitForm();
+    await parkCreationPage.expectSuccess();
+
+    // Navigate to user profile
+    await page.click('[data-testid="user-menu"]').or(page.click('button:has-text("Profile")'));
+    await page.click('text=My Submissions');
+
+    // Verify submission appears
+    await expect(page.getByText(parkData.name)).toBeVisible();
+    await expect(page.getByText(/pending/i)).toBeVisible();
+  });
+});
+
+test.describe('Park Form Validation', () => {
+  let parkCreationPage: ParkCreationPage;
+
+  test.beforeEach(async ({ page }) => {
+    parkCreationPage = new ParkCreationPage(page);
+    await parkCreationPage.goto();
+  });
+
+  test('should enforce minimum description length', async ({ page }) => {
+    await page.fill('input[name="name"]', 'Test Park');
+    await page.fill('textarea[name="description"]', 'Too short');
+
+    await parkCreationPage.submitForm();
+    
+    await expect(page.getByText(/description.*too short/i)).toBeVisible();
+  });
+
+  test('should prevent duplicate slugs', async ({ page }) => {
+    // This test would require creating a park first, then trying to create another with same slug
+    // Left as TODO - requires more complex setup
+  });
+});
--- a/tests/fixtures/auth.ts
+++ b/tests/fixtures/auth.ts
@@ -0,0 +1,123 @@
+/**
+ * Authentication Fixtures for Playwright Tests
+ * 
+ * Manages authentication state for different user roles.
+ * Creates reusable auth states to avoid logging in for every test.
+ */
+
+import { chromium, type FullConfig } from '@playwright/test';
+import { setupTestUser, supabase } from './database';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const TEST_USERS = {
+  user: {
+    email: process.env.TEST_USER_EMAIL || 'test-user@thrillwiki.test',
+    password: process.env.TEST_USER_PASSWORD || 'TestUser123!',
+    role: 'user' as const,
+  },
+  moderator: {
+    email: process.env.TEST_MODERATOR_EMAIL || 'test-moderator@thrillwiki.test',
+    password: process.env.TEST_MODERATOR_PASSWORD || 'TestModerator123!',
+    role: 'moderator' as const,
+  },
+  admin: {
+    email: process.env.TEST_ADMIN_EMAIL || 'test-admin@thrillwiki.test',
+    password: process.env.TEST_ADMIN_PASSWORD || 'TestAdmin123!',
+    role: 'admin' as const,
+  },
+  superuser: {
+    email: process.env.TEST_SUPERUSER_EMAIL || 'test-superuser@thrillwiki.test',
+    password: process.env.TEST_SUPERUSER_PASSWORD || 'TestSuperuser123!',
+    role: 'superuser' as const,
+  },
+};
+
+/**
+ * Setup authentication states for all test users
+ */
+export async function setupAuthStates(config: FullConfig): Promise<void> {
+  const baseURL = config.projects[0].use.baseURL || 'http://localhost:8080';
+  
+  // Ensure .auth directory exists
+  const authDir = path.join(process.cwd(), '.auth');
+  if (!fs.existsSync(authDir)) {
+    fs.mkdirSync(authDir, { recursive: true });
+  }
+
+  const browser = await chromium.launch();
+
+  for (const [roleName, userData] of Object.entries(TEST_USERS)) {
+    const context = await browser.newContext();
+    const page = await context.newPage();
+
+    try {
+      // Create test user if doesn't exist
+      await setupTestUser(userData.email, userData.password, userData.role);
+
+      // Navigate to login page
+      await page.goto(`${baseURL}/auth`);
+
+      // Wait for page to load
+      await page.waitForLoadState('networkidle');
+
+      // Fill login form
+      await page.fill('input[type="email"]', userData.email);
+      await page.fill('input[type="password"]', userData.password);
+
+      // Click login button
+      await page.click('button[type="submit"]');
+
+      // Wait for navigation to complete
+      await page.waitForURL('**/', { timeout: 10000 });
+
+      // Save authenticated state
+      const authFile = path.join(authDir, `${roleName}.json`);
+      await context.storageState({ path: authFile });
+
+      console.log(`✓ Created auth state for ${roleName}`);
+    } catch (error) {
+      console.error(`✗ Failed to create auth state for ${roleName}:`, error);
+      throw error;
+    } finally {
+      await context.close();
+    }
+  }
+
+  await browser.close();
+}
+
+/**
+ * Get auth credentials for a specific role
+ */
+export function getTestUserCredentials(role: keyof typeof TEST_USERS) {
+  return TEST_USERS[role];
+}
+
+/**
+ * Login programmatically (for use within tests)
+ */
+export async function loginAsUser(
+  email: string,
+  password: string
+): Promise<{ userId: string; accessToken: string }> {
+  const { data, error } = await supabase.auth.signInWithPassword({
+    email,
+    password,
+  });
+
+  if (error) throw error;
+  if (!data.user || !data.session) throw new Error('Login failed');
+
+  return {
+    userId: data.user.id,
+    accessToken: data.session.access_token,
+  };
+}
+
+/**
+ * Logout programmatically
+ */
+export async function logout(): Promise<void> {
+  await supabase.auth.signOut();
+}
--- a/tests/fixtures/database.ts
+++ b/tests/fixtures/database.ts
@@ -0,0 +1,193 @@
+/**
+ * Database Fixtures for Playwright Tests
+ * 
+ * Provides direct database access for test setup and teardown using service role.
+ * IMPORTANT: Only use for test data management, never in production code!
+ */
+
+import { createClient } from '@supabase/supabase-js';
+import type { Database } from '@/integrations/supabase/types';
+
+const supabaseUrl = 'https://ydvtmnrszybqnbcqbdcy.supabase.co';
+const supabaseAnonKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InlkdnRtbnJzenlicW5iY3FiZGN5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTgzMjYzNTYsImV4cCI6MjA3MzkwMjM1Nn0.DM3oyapd_omP5ZzIlrT0H9qBsiQBxBRgw2tYuqgXKX4';
+
+// For test setup/teardown only - requires service role key
+const supabaseServiceRoleKey = process.env.SUPABASE_SERVICE_ROLE_KEY;
+
+// Regular client for authenticated operations
+export const supabase = createClient<Database>(supabaseUrl, supabaseAnonKey);
+
+// Service role client for test setup/teardown (bypasses RLS)
+export const supabaseAdmin = supabaseServiceRoleKey
+  ? createClient<Database>(supabaseUrl, supabaseServiceRoleKey)
+  : null;
+
+/**
+ * Create a test user with specific role
+ */
+export async function setupTestUser(
+  email: string,
+  password: string,
+  role: 'user' | 'moderator' | 'admin' | 'superuser' = 'user'
+): Promise<{ userId: string; email: string }> {
+  if (!supabaseAdmin) {
+    throw new Error('Service role key not configured');
+  }
+
+  // Create user in auth
+  const { data: authData, error: authError } = await supabaseAdmin.auth.admin.createUser({
+    email,
+    password,
+    email_confirm: true,
+  });
+
+  if (authError) throw authError;
+  if (!authData.user) throw new Error('User creation failed');
+
+  const userId = authData.user.id;
+
+  // Create profile
+  const { error: profileError } = await supabaseAdmin
+    .from('profiles')
+    .upsert({
+      id: userId,
+      username: email.split('@')[0],
+      email,
+      role,
+      is_test_data: true,
+    });
+
+  if (profileError) throw profileError;
+
+  return { userId, email };
+}
+
+/**
+ * Clean up all test data
+ */
+export async function cleanupTestData(): Promise<void> {
+  if (!supabaseAdmin) {
+    throw new Error('Service role key not configured');
+  }
+
+  // Delete in dependency order (child tables first)
+  const tables = [
+    'ride_photos',
+    'park_photos',
+    'submission_items',
+    'content_submissions',
+    'ride_versions',
+    'park_versions',
+    'company_versions',
+    'ride_model_versions',
+    'rides',
+    'ride_models',
+    'parks',
+    'companies',
+  ];
+
+  for (const table of tables) {
+    await supabaseAdmin
+      .from(table as any)
+      .delete()
+      .eq('is_test_data', true);
+  }
+
+  // Delete test profiles
+  const { data: profiles } = await supabaseAdmin
+    .from('profiles')
+    .select('id')
+    .eq('is_test_data', true);
+
+  if (profiles) {
+    for (const profile of profiles) {
+      await supabaseAdmin.auth.admin.deleteUser(profile.id);
+    }
+  }
+}
+
+/**
+ * Query database directly for assertions
+ */
+export async function queryDatabase<T = any>(
+  table: string,
+  query: (qb: any) => any
+): Promise<T[]> {
+  if (!supabaseAdmin) {
+    throw new Error('Service role key not configured');
+  }
+
+  const { data, error } = await query(supabaseAdmin.from(table));
+  
+  if (error) throw error;
+  return data || [];
+}
+
+/**
+ * Wait for a version to be created
+ */
+export async function waitForVersion(
+  entityId: string,
+  versionNumber: number,
+  table: string,
+  maxWaitMs: number = 5000
+): Promise<boolean> {
+  if (!supabaseAdmin) {
+    throw new Error('Service role key not configured');
+  }
+
+  const startTime = Date.now();
+  
+  while (Date.now() - startTime < maxWaitMs) {
+    const { data } = await supabaseAdmin
+      .from(table as any)
+      .select('version_number')
+      .eq('entity_id', entityId)
+      .eq('version_number', versionNumber)
+      .single();
+
+    if (data) return true;
+    
+    await new Promise(resolve => setTimeout(resolve, 500));
+  }
+
+  return false;
+}
+
+/**
+ * Approve a submission directly (for test setup)
+ */
+export async function approveSubmissionDirect(submissionId: string): Promise<void> {
+  if (!supabaseAdmin) {
+    throw new Error('Service role key not configured');
+  }
+
+  const { error } = await supabaseAdmin.rpc('approve_submission', {
+    submission_id: submissionId,
+  });
+
+  if (error) throw error;
+}
+
+/**
+ * Get test data statistics
+ */
+export async function getTestDataStats(): Promise<Record<string, number>> {
+  if (!supabaseAdmin) {
+    throw new Error('Service role key not configured');
+  }
+
+  const tables = ['parks', 'rides', 'companies', 'ride_models', 'content_submissions'];
+  const stats: Record<string, number> = {};
+
+  for (const table of tables) {
+    const { count } = await supabaseAdmin
+      .from(table as any)
+      .select('*', { count: 'exact', head: true })
+      .eq('is_test_data', true);
+
+    stats[table] = count || 0;
+  }
+
+  return stats;
+}
--- a/tests/fixtures/test-data.ts
+++ b/tests/fixtures/test-data.ts
@@ -0,0 +1,140 @@
+/**
+ * Test Data Generators
+ * 
+ * Factory functions for creating realistic test data.
+ */
+
+import { faker } from '@faker-js/faker';
+
+export interface ParkTestData {
+  name: string;
+  slug: string;
+  description: string;
+  park_type: string;
+  status: string;
+  location_country: string;
+  location_city: string;
+  latitude: number;
+  longitude: number;
+  opened_date: string;
+  is_test_data: boolean;
+}
+
+export interface RideTestData {
+  name: string;
+  slug: string;
+  description: string;
+  category: string;
+  status: string;
+  park_id: string;
+  opened_date: string;
+  is_test_data: boolean;
+}
+
+export interface CompanyTestData {
+  name: string;
+  slug: string;
+  description: string;
+  company_type: string;
+  person_type: string;
+  founded_date: string;
+  is_test_data: boolean;
+}
+
+export interface RideModelTestData {
+  name: string;
+  slug: string;
+  description: string;
+  category: string;
+  manufacturer_id: string;
+  is_test_data: boolean;
+}
+
+/**
+ * Generate random park test data
+ */
+export function generateParkData(overrides?: Partial<ParkTestData>): ParkTestData {
+  const name = faker.company.name() + ' Park';
+  
+  return {
+    name,
+    slug: faker.helpers.slugify(name).toLowerCase(),
+    description: faker.lorem.paragraphs(2),
+    park_type: faker.helpers.arrayElement(['theme_park', 'amusement_park', 'water_park']),
+    status: faker.helpers.arrayElement(['operating', 'closed', 'under_construction']),
+    location_country: faker.location.countryCode(),
+    location_city: faker.location.city(),
+    latitude: parseFloat(faker.location.latitude()),
+    longitude: parseFloat(faker.location.longitude()),
+    opened_date: faker.date.past({ years: 50 }).toISOString().split('T')[0],
+    is_test_data: true,
+    ...overrides,
+  };
+}
+
+/**
+ * Generate random ride test data
+ */
+export function generateRideData(parkId: string, overrides?: Partial<RideTestData>): RideTestData {
+  const name = faker.word.adjective() + ' ' + faker.word.noun();
+  
+  return {
+    name,
+    slug: faker.helpers.slugify(name).toLowerCase(),
+    description: faker.lorem.paragraphs(2),
+    category: faker.helpers.arrayElement(['roller_coaster', 'flat_ride', 'water_ride', 'dark_ride']),
+    status: faker.helpers.arrayElement(['operating', 'closed', 'sbno']),
+    park_id: parkId,
+    opened_date: faker.date.past({ years: 30 }).toISOString().split('T')[0],
+    is_test_data: true,
+    ...overrides,
+  };
+}
+
+/**
+ * Generate random company test data
+ */
+export function generateCompanyData(
+  companyType: 'manufacturer' | 'designer' | 'operator' | 'property_owner',
+  overrides?: Partial<CompanyTestData>
+): CompanyTestData {
+  const name = faker.company.name();
+  
+  return {
+    name,
+    slug: faker.helpers.slugify(name).toLowerCase(),
+    description: faker.lorem.paragraphs(2),
+    company_type: companyType,
+    person_type: faker.helpers.arrayElement(['individual', 'company']),
+    founded_date: faker.date.past({ years: 100 }).toISOString().split('T')[0],
+    is_test_data: true,
+    ...overrides,
+  };
+}
+
+/**
+ * Generate random ride model test data
+ */
+export function generateRideModelData(
+  manufacturerId: string,
+  overrides?: Partial<RideModelTestData>
+): RideModelTestData {
+  const name = faker.word.adjective() + ' Model';
+  
+  return {
+    name,
+    slug: faker.helpers.slugify(name).toLowerCase(),
+    description: faker.lorem.paragraphs(2),
+    category: faker.helpers.arrayElement(['roller_coaster', 'flat_ride', 'water_ride']),
+    manufacturer_id: manufacturerId,
+    is_test_data: true,
+    ...overrides,
+  };
+}
+
+/**
+ * Generate unique test identifier
+ */
+export function generateTestId(): string {
+  return `test-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
--- a/tests/helpers/page-objects/LoginPage.ts
+++ b/tests/helpers/page-objects/LoginPage.ts
@@ -0,0 +1,48 @@
+/**
+ * Login Page Object Model
+ * 
+ * Encapsulates interactions with the login page.
+ */
+
+import { Page, expect } from '@playwright/test';
+
+export class LoginPage {
+  constructor(private page: Page) {}
+
+  async goto() {
+    await this.page.goto('/auth');
+    await this.page.waitForLoadState('networkidle');
+  }
+
+  async login(email: string, password: string) {
+    await this.page.fill('input[type="email"]', email);
+    await this.page.fill('input[type="password"]', password);
+    await this.page.click('button[type="submit"]');
+  }
+
+  async expectLoginSuccess() {
+    // Wait for navigation away from auth page
+    await this.page.waitForURL('**/', { timeout: 10000 });
+    
+    // Verify we're on homepage or dashboard
+    await expect(this.page).not.toHaveURL(/\/auth/);
+  }
+
+  async expectLoginError(message?: string) {
+    // Check for error toast or message
+    if (message) {
+      await expect(this.page.getByText(message)).toBeVisible();
+    } else {
+      // Just verify we're still on auth page
+      await expect(this.page).toHaveURL(/\/auth/);
+    }
+  }
+
+  async clickSignUp() {
+    await this.page.click('text=Sign up');
+  }
+
+  async clickForgotPassword() {
+    await this.page.click('text=Forgot password');
+  }
+}
--- a/tests/helpers/page-objects/ModerationQueuePage.ts
+++ b/tests/helpers/page-objects/ModerationQueuePage.ts
@@ -0,0 +1,100 @@
+/**
+ * Moderation Queue Page Object Model
+ * 
+ * Encapsulates interactions with the moderation queue.
+ */
+
+import { Page, expect } from '@playwright/test';
+
+export class ModerationQueuePage {
+  constructor(private page: Page) {}
+
+  async goto() {
+    await this.page.goto('/moderation/queue');
+    await this.page.waitForLoadState('networkidle');
+  }
+
+  async claimSubmission(index: number = 0) {
+    const claimButtons = this.page.locator('button:has-text("Claim")');
+    await claimButtons.nth(index).click();
+    
+    // Wait for lock to be acquired
+    await expect(this.page.getByText(/claimed by you/i)).toBeVisible({ timeout: 5000 });
+  }
+
+  async approveSubmission(reason?: string) {
+    // Click approve button
+    await this.page.click('button:has-text("Approve")');
+    
+    // Fill optional reason if provided
+    if (reason) {
+      await this.page.fill('textarea[placeholder*="reason"]', reason);
+    }
+    
+    // Confirm in dialog
+    await this.page.click('button:has-text("Confirm")');
+    
+    // Wait for success toast
+    await expect(this.page.getByText(/approved/i)).toBeVisible({ timeout: 10000 });
+  }
+
+  async rejectSubmission(reason: string) {
+    // Click reject button
+    await this.page.click('button:has-text("Reject")');
+    
+    // Fill required reason
+    await this.page.fill('textarea[placeholder*="reason"]', reason);
+    
+    // Confirm in dialog
+    await this.page.click('button:has-text("Confirm")');
+    
+    // Wait for success toast
+    await expect(this.page.getByText(/rejected/i)).toBeVisible({ timeout: 10000 });
+  }
+
+  async extendLock() {
+    await this.page.click('button:has-text("Extend")');
+    await expect(this.page.getByText(/extended/i)).toBeVisible({ timeout: 5000 });
+  }
+
+  async releaseLock() {
+    await this.page.click('button:has-text("Release")');
+    await expect(this.page.getByText(/released/i)).toBeVisible({ timeout: 5000 });
+  }
+
+  async filterByType(type: string) {
+    await this.page.selectOption('select[name="entity_type"]', type);
+    await this.page.waitForLoadState('networkidle');
+  }
+
+  async filterByStatus(status: string) {
+    await this.page.selectOption('select[name="status"]', status);
+    await this.page.waitForLoadState('networkidle');
+  }
+
+  async searchBySubmitter(name: string) {
+    await this.page.fill('input[placeholder*="submitter"]', name);
+    await this.page.waitForTimeout(500); // Debounce
+    await this.page.waitForLoadState('networkidle');
+  }
+
+  async expectSubmissionVisible(submissionName: string) {
+    await expect(this.page.getByText(submissionName)).toBeVisible();
+  }
+
+  async expectSubmissionNotVisible(submissionName: string) {
+    await expect(this.page.getByText(submissionName)).not.toBeVisible();
+  }
+
+  async expectLockTimer() {
+    // Check that lock timer is visible (e.g., "14:59 remaining")
+    await expect(this.page.locator('[data-testid="lock-timer"]').or(
+      this.page.getByText(/\d{1,2}:\d{2}.*remaining/i)
+    )).toBeVisible();
+  }
+
+  async expectLockWarning() {
+    // Warning should appear at 2 minutes remaining
+    await expect(this.page.getByText(/lock.*expir/i)).toBeVisible();
+  }
+}
--- a/tests/helpers/page-objects/ParkCreationPage.ts
+++ b/tests/helpers/page-objects/ParkCreationPage.ts
@@ -0,0 +1,87 @@
+/**
+ * Park Creation Page Object Model
+ * 
+ * Encapsulates interactions with the park creation/editing form.
+ */
+
+import { Page, expect } from '@playwright/test';
+
+export class ParkCreationPage {
+  constructor(private page: Page) {}
+
+  async goto() {
+    await this.page.goto('/parks/new');
+    await this.page.waitForLoadState('networkidle');
+  }
+
+  async fillBasicInfo(name: string, description: string) {
+    // Fill park name
+    await this.page.fill('input[name="name"]', name);
+    
+    // Slug should auto-generate, but we can override if needed
+    // await this.page.fill('input[name="slug"]', slug);
+    
+    // Fill description (might be a textarea or rich text editor)
+    const descField = this.page.locator('textarea[name="description"]').first();
+    await descField.fill(description);
+  }
+
+  async selectParkType(type: string) {
+    // Assuming a select or radio group
+    await this.page.click(`[data-park-type="${type}"]`);
+  }
+
+  async selectStatus(status: string) {
+    await this.page.click(`[data-status="${status}"]`);
+  }
+
+  async searchLocation(query: string) {
+    const searchInput = this.page.locator('input[placeholder*="location"]').or(
+      this.page.locator('input[placeholder*="search"]')
+    );
+    await searchInput.fill(query);
+    await this.page.waitForTimeout(500); // Wait for autocomplete
+  }
+
+  async selectLocation(name: string) {
+    await this.page.click(`text=${name}`);
+  }
+
+  async setOpeningDate(date: string, precision: 'day' | 'month' | 'year' = 'day') {
+    await this.page.fill('input[name="opened_date"]', date);
+    await this.page.selectOption('select[name="date_precision"]', precision);
+  }
+
+  async uploadBannerImage(filePath: string) {
+    const fileInput = this.page.locator('input[type="file"][accept*="image"]').first();
+    await fileInput.setInputFiles(filePath);
+  }
+
+  async uploadCardImage(filePath: string) {
+    const fileInputs = this.page.locator('input[type="file"][accept*="image"]');
+    await fileInputs.nth(1).setInputFiles(filePath);
+  }
+
+  async uploadGalleryImages(filePaths: string[]) {
+    const galleryInput = this.page.locator('input[type="file"][multiple]');
+    await galleryInput.setInputFiles(filePaths);
+  }
+
+  async selectOperator(operatorName: string) {
+    await this.page.click('button:has-text("Select operator")');
+    await this.page.click(`text=${operatorName}`);
+  }
+
+  async submitForm() {
+    await this.page.click('button[type="submit"]:has-text("Submit")');
+  }
+
+  async expectSuccess() {
+    // Wait for success toast
+    await expect(this.page.getByText(/submitted.*review/i)).toBeVisible({ timeout: 10000 });
+  }
+
+  async expectValidationError(message: string) {
+    await expect(this.page.getByText(message)).toBeVisible();
+  }
+}
--- a/tests/setup/global-setup.ts
+++ b/tests/setup/global-setup.ts
@@ -0,0 +1,30 @@
+/**
+ * Playwright Global Setup
+ * 
+ * Runs once before all tests to prepare the test environment.
+ */
+
+import { FullConfig } from '@playwright/test';
+import { setupAuthStates } from '../fixtures/auth';
+import { cleanupTestData } from '../fixtures/database';
+
+async function globalSetup(config: FullConfig) {
+  console.log('🚀 Starting global setup...');
+
+  try {
+    // Clean up any leftover test data from previous runs
+    console.log('🧹 Cleaning up leftover test data...');
+    await cleanupTestData();
+
+    // Setup authentication states for all user roles
+    console.log('🔐 Setting up authentication states...');
+    await setupAuthStates(config);
+
+    console.log('✅ Global setup complete');
+  } catch (error) {
+    console.error('❌ Global setup failed:', error);
+    throw error;
+  }
+}
+
+export default globalSetup;
--- a/tests/setup/global-teardown.ts
+++ b/tests/setup/global-teardown.ts
@@ -0,0 +1,39 @@
+/**
+ * Playwright Global Teardown
+ * 
+ * Runs once after all tests to clean up the test environment.
+ */
+
+import { FullConfig } from '@playwright/test';
+import { cleanupTestData, getTestDataStats } from '../fixtures/database';
+
+async function globalTeardown(config: FullConfig) {
+  console.log('🧹 Starting global teardown...');
+
+  try {
+    // Get stats before cleanup
+    const statsBefore = await getTestDataStats();
+    console.log('📊 Test data before cleanup:', statsBefore);
+
+    // Clean up all test data
+    await cleanupTestData();
+
+    // Verify cleanup
+    const statsAfter = await getTestDataStats();
+    console.log('📊 Test data after cleanup:', statsAfter);
+
+    const totalRemaining = Object.values(statsAfter).reduce((sum, count) => sum + count, 0);
+    if (totalRemaining > 0) {
+      console.warn('⚠️  Some test data may not have been cleaned up properly');
+    } else {
+      console.log('✅ All test data cleaned up successfully');
+    }
+
+    console.log('✅ Global teardown complete');
+  } catch (error) {
+    console.error('❌ Global teardown failed:', error);
+    // Don't throw - we don't want to fail the test run because of cleanup issues
+  }
+}
+
+export default globalTeardown;