feat: Implement Playwright testing setup

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();
+  }
+}