import { chromium } from '@playwright/test';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  try {
    console.log('1. Navigating to Vue 3 Vite 8 SPA Login Page (http://localhost:5173/login)...');
    await page.goto('http://localhost:5173/login');
    await page.screenshot({ path: './playwright-vue3-step1-login.png', fullPage: true });

    console.log('2. Filling Vue 3 TS form credentials (admin / admin)...');
    await page.fill('input[id="username"]', 'admin');
    await page.fill('input[id="password"]', 'admin');
    
    console.log('3. Submitting Vue 3 form...');
    await page.click('button[type="submit"]');
    await page.waitForURL('**/dashboard', { timeout: 10000 });
    
    console.log(`4. Successfully logged in Vue 3 SPA! Current URL: ${page.url()}`);
    await page.screenshot({ path: './playwright-vue3-step2-dashboard.png', fullPage: true });

    console.log('5. Navigating to Vue 3 Database View (Master-Detail 30:70 Split)...');
    await page.goto('http://localhost:5173/database');
    await page.screenshot({ path: './playwright-vue3-step3-database.png', fullPage: true });

    console.log('✓✓✓ ALL VUE 3 + VITE 8 + TYPESCRIPT PLAYWRIGHT TESTS PASSED PERFECTLY!');
  } catch (e) {
    console.error('Playwright Vue 3 Test Failed:', e);
  } finally {
    await browser.close();
  }
})();