geutebruck/.playwright-mcp/comprehensive_debug_loop.mjs

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

(async () => {
  console.log('=== COMPREHENSIVE DEBUG LOOP - Action Mappings ===\n');

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

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

  const allErrors = [];
  const typeErrors = [];
  const apiCalls = [];

  // Capture EVERYTHING
  page.on('console', msg => {
    const text = msg.text();
    const type = msg.type();

    // Log all console messages
    if (type === 'error' || text.includes('ERROR') || text.includes('🔴')) {
      console.log(`❌ [${type}] ${text}`);
      allErrors.push({ type: 'console', level: type, text });

      // Check for type errors
      if (text.includes('type') && (text.includes('String') || text.includes('int') || text.includes('List') || text.includes('Map'))) {
        typeErrors.push(text);
        console.log(`🚨 TYPE ERROR DETECTED: ${text}`);
      }
    } else if (text.includes('🔵') || text.includes('🟢') || text.includes('REQUEST') || text.includes('RESPONSE')) {
      console.log(`📡 ${text}`);
    }
  });

  // Capture page errors
  page.on('pageerror', error => {
    console.log(`💥 PAGE ERROR: ${error.message}`);
    allErrors.push({ type: 'page', error: error.message });
  });

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

      try {
        body = await response.text();
        const parsed = JSON.parse(body);

        apiCalls.push({
          url: response.url(),
          status: status,
          data: parsed
        });

        console.log(`\n📥 API RESPONSE: ${status} ${response.url()}`);
        console.log(`   Total mappings: ${parsed.total_mappings || parsed.length || 'unknown'}`);

        // Analyze first mapping for type issues
        if (parsed.mappings && parsed.mappings[0]) {
          const firstMapping = parsed.mappings[0];
          console.log('\n🔍 FIRST MAPPING ANALYSIS:');
          console.log(`   id type: ${typeof firstMapping.id} (value: ${firstMapping.id})`);
          console.log(`   name type: ${typeof firstMapping.name}`);
          console.log(`   offset type: ${typeof firstMapping.offset}`);

          // Check for type mismatches
          if (typeof firstMapping.id === 'number') {
            console.log(`   ⚠️  WARNING: id is number, might expect string!`);
          }
          if (typeof firstMapping.offset === 'number') {
            console.log(`   ℹ️  offset is number`);
          }
        }
      } catch (e) {
        body = '[Could not parse]';
      }
    }
  });

  try {
    console.log('1️⃣  Login...');
    await page.goto('http://100.81.138.77:8081/', { waitUntil: 'networkidle', timeout: 60000 });
    await page.waitForTimeout(3000);

    // Click on page to ensure focus, then use keyboard navigation for Flutter web
    await page.click('body');
    await page.waitForTimeout(500);

    // Tab to username field and enter credentials
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.type('admin', { delay: 50 });
    await page.waitForTimeout(300);

    // Tab to password field
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.type('admin123', { delay: 50 });
    await page.waitForTimeout(300);

    // Press Enter to submit
    await page.keyboard.press('Enter');
    await page.waitForTimeout(5000);

    console.log('\n2️⃣  Navigate to Action Mappings...');
    await page.goto('http://100.81.138.77:8081/#/action-mappings', { waitUntil: 'networkidle', timeout: 60000 });
    await page.waitForTimeout(3000);

    console.log('\n3️⃣  Click download (using Tab navigation)...');
    // More reliable: press Tab multiple times to reach download button
    for (let i = 0; i < 5; i++) {
      await page.keyboard.press('Tab');
      await page.waitForTimeout(300);
    }
    await page.keyboard.press('Enter');

    console.log('   Waiting for response and processing...');
    await page.waitForTimeout(10000); // Wait longer for any errors to appear

    console.log('\n4️⃣  Take screenshot of final state...');
    await page.screenshot({ path: 'action-mappings-debug.png', fullPage: true });

  } catch (error) {
    console.error(`\n💥 TEST ERROR: ${error.message}`);
    allErrors.push({ type: 'test', error: error.message });
    await page.screenshot({ path: 'action-mappings-error.png', fullPage: true });
  }

  // COMPREHENSIVE SUMMARY
  console.log('\n' + '='.repeat(70));
  console.log('COMPREHENSIVE DIAGNOSTIC SUMMARY');
  console.log('='.repeat(70));

  console.log(`\n📊 Statistics:`);
  console.log(`   Total errors: ${allErrors.length}`);
  console.log(`   Type errors: ${typeErrors.length}`);
  console.log(`   API calls: ${apiCalls.length}`);

  if (typeErrors.length > 0) {
    console.log(`\n🚨 TYPE ERRORS FOUND (${typeErrors.length}):`);
    typeErrors.forEach((err, i) => {
      console.log(`\n   ${i + 1}. ${err}`);
    });
  }

  if (allErrors.length > 0) {
    console.log(`\n❌ ALL ERRORS (${allErrors.length}):`);
    allErrors.forEach((err, i) => {
      console.log(`\n   ${i + 1}. [${err.type}] ${err.text || err.error}`);
    });
  }

  if (apiCalls.length > 0) {
    console.log(`\n📡 API DATA SAMPLE:`);
    const call = apiCalls[0];
    if (call.data.mappings && call.data.mappings[0]) {
      console.log(JSON.stringify(call.data.mappings[0], null, 2));
    }
  }

  // Save detailed report
  const report = {
    timestamp: new Date().toISOString(),
    summary: {
      totalErrors: allErrors.length,
      typeErrors: typeErrors.length,
      apiCalls: apiCalls.length
    },
    errors: allErrors,
    typeErrors: typeErrors,
    apiCalls: apiCalls
  };

  fs.writeFileSync('debug-report.json', JSON.stringify(report, null, 2));
  console.log('\n📄 Full report saved to: debug-report.json');

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

  const exitCode = typeErrors.length > 0 || allErrors.length > 0 ? 1 : 0;
  console.log(`\n${exitCode === 0 ? '✅ PASS' : '❌ FAIL'}: Exit code ${exitCode}`);
  console.log('='.repeat(70));

  process.exit(exitCode);
})();