use axios for wizard API config

Dockerfile

@@ -1,5 +1,26 @@
 FROM node:20-bookworm-slim
 
+RUN apt-get update && apt-get install -y \
+    libglib2.0-0 \
+    libnss3 \
+    libnspr4 \
+    libatk1.0-0 \
+    libatk-bridge2.0-0 \
+    libcups2 \
+    libdrm2 \
+    libdbus-1-3 \
+    libxkbcommon0 \
+    libxcomposite1 \
+    libxdamage1 \
+    libxfixes3 \
+    libxrandr2 \
+    libgbm1 \
+    libpango-1.0-0 \
+    libcairo2 \
+    libasound2 \
+    libatspi2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
 ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
 ENV CHROME_DEBUGGING_PORT=9222
 

playwright.config.ts

@@ -1,8 +1,7 @@
 import { defineConfig, devices } from '@playwright/test';
 
-const baseURL = process.env.BASE_URL || 'http://127.0.0.1:3000';
-const webServerURL = process.env.WEB_SERVER_URL || baseURL;
-const chromeDebuggingPort = process.env.CHROME_DEBUGGING_PORT || '9222';
+const baseURL = process.env.FRONTEND_URL || 'http://frontend:3000';
+const backendURL = process.env.BACKEND_URL || 'http://backend:8000';
 
 export default defineConfig({
   testDir: './tests',
@@ -14,22 +13,16 @@ export default defineConfig({
   use: {
     baseURL,
     trace: 'on-first-retry',
-    launchOptions: {
-      args: [`--remote-debugging-port=${chromeDebuggingPort}`],
-    },
   },
   projects: [
     {
       name: 'chromium',
-      use: { 
-        ...devices['Desktop Chrome'],
-        channel: 'chrome',
-      },
+      use: { ...devices['Desktop Chrome'] },
     },
   ],
   webServer: {
     command: 'npm run dev',
-    url: webServerURL,
+    url: baseURL,
     reuseExistingServer: !process.env.CI,
   },
 });

tests/example.spec.ts

@@ -1,6 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('has title', async ({ page }) => {
-  await page.goto('/');
-  await expect(page).toHaveTitle(/HarborForge/);
-});

tests/wizard.spec.ts

@@ -0,0 +1,64 @@
+import { test, expect } from '@playwright/test';
+import axios from 'axios';
+
+const FRONTEND_URL = process.env.FRONTEND_URL || 'http://frontend:3000';
+const BACKEND_URL = process.env.BACKEND_URL || 'http://backend:8000';
+const WIZARD_URL = process.env.WIZARD_URL || 'http://wizard:8080';
+
+test.describe('Setup Wizard', () => {
+  test('complete wizard flow', async ({ page }) => {
+    // First configure wizard via API
+    await axios.put(`${WIZARD_URL}/api/v1/config/harborforge.json`, {
+      initialized: true,
+      admin: {
+        username: "admin",
+        password: "admin123",
+        email: "admin@test.com",
+        full_name: "Admin"
+      },
+      database: {
+        host: "mysql",
+        port: 3306,
+        user: "harborforge",
+        password: "harborforge_pass",
+        database: "harborforge"
+      },
+      backend_url: BACKEND_URL,
+      default_project: {
+        name: "TestProject",
+        description: "Test project"
+      }
+    });
+
+    // Now test the wizard flow in browser
+    await page.goto(FRONTEND_URL);
+    
+    // Step 0: Welcome - Click "Connect to Wizard"
+    await expect(page.locator('h1')).toContainText('HarborForge Setup Wizard');
+    await page.click('button:has-text("Connect to Wizard")');
+    
+    // Wait for wizard health check - should proceed to step 1
+    await page.waitForTimeout(1000);
+    
+    // Step 1: Database - Click Next with defaults
+    if (await page.locator('h2:has-text("Database configuration")').isVisible()) {
+      await page.click('button:has-text("Next")');
+    }
+    
+    // Step 2: Admin - Fill in admin credentials
+    await page.fill('input[placeholder="Set admin password"]', 'admin123');
+    await page.fill('input[type="email"]', 'admin@test.com');
+    await page.fill('input[value="Admin"]', 'Test Admin');
+    await page.click('button:has-text("Next")');
+    
+    // Step 3: Project - Configure backend and project
+    await page.fill('input[placeholder="http://127.0.0.1:8000"]', BACKEND_URL);
+    await page.fill('input[value="Default"]', 'Test Project');
+    await page.fill('input[value="Default project"]', 'Test Project Description');
+    await page.click('button:has-text("Finish setup")');
+    
+    // Step 4: Complete
+    await expect(page.locator('h2')).toContainText('Setup complete!');
+    await expect(page.locator('code')).toContainText('docker compose restart');
+  });
+});