geutebruck/.playwright-mcp/test_action_mappings_download.mjs

import { chromium } from 'playwright';
import fs from 'fs';

(async () => {
  console.log('=== Automated Action Mappings Download Test ===\n');

  const browser = await chromium.launch({
    headless: false,
    slowMo: 500
  });

  const context = await browser.newContext();
  const page = await context.newPage();

  const errors = [];
  const networkLogs = [];
  const consoleLogs = [];

  // Capture console
  page.on('console', msg => {
    const text = msg.text();
    consoleLogs.push({ type: msg.type(), text: text, timestamp: new Date().toISOString() });
    console.log(`[CONSOLE ${msg.type()}] ${text}`);
  });

  // Capture network
  page.on('request', request => {
    if (request.url().includes('api/v1')) {
      const log = {
        type: 'request',
        method: request.method(),
        url: request.url(),
        headers: request.headers(),
        timestamp: new Date().toISOString()
      };
      networkLogs.push(log);
      console.log(`📤 ${log.method} ${log.url}`);
      if (log.headers['authorization']) {
        console.log(`   Auth: ${log.headers['authorization'].substring(0, 30)}...`);
      }
    }
  });

  page.on('response', async response => {
    if (response.url().includes('api/v1')) {
      const status = response.status();
      const url = response.url();
      let body = null;

      try {
        body = await response.text();
      } catch (e) {
        body = '[Could not read body]';
      }

      const log = {
        type: 'response',
        status: status,
        url: url,
        body: body,
        timestamp: new Date().toISOString()
      };
      networkLogs.push(log);

      const icon = status >= 400 ? '❌' : '✅';
      console.log(`${icon} ${status} ${url}`);

      if (status >= 400) {
        console.log(`   Body: ${body}`);
        errors.push({ status, url, body });
      } else {
        console.log(`   Body: ${body.substring(0, 100)}...`);
      }
    }
  });

  try {
    // Step 1: Navigate
    console.log('\n1️⃣  Navigating to login...');
    await page.goto('http://100.81.138.77:8081/', { waitUntil: 'networkidle', timeout: 60000 });
    await page.waitForTimeout(3000);
    await page.screenshot({ path: 'step1-initial-load.png' });

    // Step 2: Wait for Flutter to load (canvas based)
    console.log('\n2️⃣  Waiting for Flutter app to render...');
    await page.waitForTimeout(5000);
    await page.screenshot({ path: 'step2-app-loaded.png' });

    // Step 3: Login with keyboard
    console.log('\n3️⃣  Logging in (using keyboard navigation)...');
    // Tab to username field and type
    await page.keyboard.press('Tab');
    await page.keyboard.type('admin', { delay: 100 });
    await page.keyboard.press('Tab');
    await page.keyboard.type('admin123', { delay: 100 });
    await page.screenshot({ path: 'step3-credentials-entered.png' });

    // Press Enter to submit
    await page.keyboard.press('Enter');
    console.log('   Waiting for login response...');
    await page.waitForTimeout(5000);
    await page.screenshot({ path: 'step4-after-login.png' });

    // Step 4: Navigate to action mappings
    console.log('\n4️⃣  Navigating to action mappings...');
    await page.goto('http://100.81.138.77:8081/#/action-mappings', { waitUntil: 'networkidle', timeout: 60000 });
    await page.waitForTimeout(3000);
    await page.screenshot({ path: 'step5-action-mappings-page.png' });

    // Step 5: Click download button (using keyboard)
    console.log('\n5️⃣  Clicking download button...');
    // Use keyboard to navigate to download button
    // Typically: Tab, Tab, Tab to skip search, sync, then download button
    await page.keyboard.press('Tab');
    await page.keyboard.press('Tab');
    await page.keyboard.press('Tab');
    await page.keyboard.press('Enter');

    console.log('   Waiting for API response...');
    await page.waitForTimeout(8000);
    await page.screenshot({ path: 'step6-after-download-click.png' });

    // Step 6: Check for success or error messages
    console.log('\n6️⃣  Checking results...');
    await page.screenshot({ path: 'step7-final-state.png' });

  } catch (error) {
    console.error('\n❌ Test error:', error.message);
    await page.screenshot({ path: 'error-screenshot.png' });
    errors.push({ error: error.message, stack: error.stack });
  }

  // Summary
  console.log('\n' + '='.repeat(60));
  console.log('SUMMARY');
  console.log('='.repeat(60));

  console.log(`\nNetwork Requests: ${networkLogs.filter(l => l.type === 'request').length}`);
  console.log(`Network Responses: ${networkLogs.filter(l => l.type === 'response').length}`);
  console.log(`Console Messages: ${consoleLogs.length}`);
  console.log(`Errors: ${errors.length}`);

  if (errors.length > 0) {
    console.log('\n❌ ERRORS DETECTED:');
    errors.forEach((err, i) => {
      console.log(`\nError ${i + 1}:`);
      if (err.status) {
        console.log(`  HTTP ${err.status}: ${err.url}`);
        console.log(`  Response: ${err.body}`);
      } else {
        console.log(`  ${err.error}`);
      }
    });
  } else {
    console.log('\n✅ No errors detected!');
  }

  // Save detailed logs
  fs.writeFileSync('test-results.json', JSON.stringify({
    errors,
    networkLogs,
    consoleLogs
  }, null, 2));

  console.log('\n📊 Detailed logs saved to: test-results.json');
  console.log('📸 Screenshots saved to: step*.png');

  await page.waitForTimeout(3000);
  await browser.close();

  console.log('\n=== Test Complete ===');
  process.exit(errors.length > 0 ? 1 : 0);
})();