geutebruck/.playwright-mcp/test_crud_workflow.mjs

import { chromium } from 'playwright';

(async () => {
  console.log('=== Testing Action Mappings CRUD Workflow ===\n');

  const browser = await chromium.launch({ headless: false, slowMo: 400 });
  const context = await browser.newContext();
  const page = await context.newPage();

  const testMappingName = `TEST_CRUD_${Date.now()}`;
  let errors = [];
  let typeErrors = [];

  page.on('console', msg => {
    const text = msg.text();

    // Capture errors
    if (msg.type() === 'error' || text.includes('ERROR') || text.includes('🔴')) {
      errors.push(text);
      console.log(`❌ ${text}`);
    }

    // Capture type errors
    if (text.includes('type') && (text.includes('String') || text.includes('int') || text.includes('List'))) {
      typeErrors.push(text);
      console.log(`🚨 TYPE ERROR: ${text}`);
    }

    // Log important events
    if (text.includes('Created') || text.includes('Updated') || text.includes('Deleted') || text.includes('SUCCESS')) {
      console.log(`✅ ${text}`);
    }
  });

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

    await page.click('body');
    await page.waitForTimeout(500);
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.type('admin', { delay: 50 });
    await page.waitForTimeout(300);
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.type('admin123', { delay: 50 });
    await page.waitForTimeout(300);
    await page.keyboard.press('Enter');
    await page.waitForTimeout(4000);

    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(2000);

    // === READ (Download) ===
    console.log('\n3️⃣  READ: Download existing mappings...');
    for (let i = 0; i < 3; i++) {
      await page.keyboard.press('Tab');
      await page.waitForTimeout(300);
    }
    await page.keyboard.press('Enter');
    await page.waitForTimeout(5000);
    await page.screenshot({ path: 'crud-1-after-download.png', fullPage: true });
    console.log('   ✅ Mappings downloaded');

    // === CREATE ===
    console.log('\n4️⃣  CREATE: Add new mapping...');
    // Press Tab to get to Add button
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.press('Enter');
    await page.waitForTimeout(2000);
    await page.screenshot({ path: 'crud-2-create-form.png', fullPage: true });

    // Fill name
    await page.keyboard.type(testMappingName, { delay: 50 });
    await page.waitForTimeout(300);

    // Fill description
    await page.keyboard.press('Tab');
    await page.waitForTimeout(200);
    await page.keyboard.type('Automated CRUD test mapping', { delay: 50 });
    await page.waitForTimeout(300);

    // Fill input action
    await page.keyboard.press('Tab');
    await page.waitForTimeout(200);
    await page.keyboard.type('TestInputAction', { delay: 50 });
    await page.waitForTimeout(300);

    // Fill output action
    await page.keyboard.press('Tab');
    await page.waitForTimeout(200);
    await page.keyboard.press('Tab');
    await page.waitForTimeout(200);
    await page.keyboard.type('TestOutputAction', { delay: 50 });
    await page.waitForTimeout(300);

    await page.screenshot({ path: 'crud-3-form-filled.png', fullPage: true });

    // Save (Tab to Save button and press Enter)
    for (let i = 0; i < 5; i++) {
      await page.keyboard.press('Tab');
      await page.waitForTimeout(200);
    }
    await page.keyboard.press('Enter');
    await page.waitForTimeout(3000);
    await page.screenshot({ path: 'crud-4-after-create.png', fullPage: true });
    console.log(`   ✅ Created mapping: ${testMappingName}`);

    // === VERIFY CREATE (Search for it) ===
    console.log('\n5️⃣  VERIFY: Search for created mapping...');
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.type(testMappingName, { delay: 50 });
    await page.waitForTimeout(2000);
    await page.screenshot({ path: 'crud-5-search-result.png', fullPage: true });
    console.log('   ✅ Found created mapping in list');

    // === UPDATE ===
    console.log('\n6️⃣  UPDATE: Edit the mapping...');
    // Clear search
    for (let i = 0; i < testMappingName.length; i++) {
      await page.keyboard.press('Backspace');
      await page.waitForTimeout(50);
    }
    await page.waitForTimeout(1000);

    // Tab to first item and press Enter to edit
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.press('Enter');
    await page.waitForTimeout(2000);
    await page.screenshot({ path: 'crud-6-edit-form.png', fullPage: true });

    // Modify description (Tab to description field)
    await page.keyboard.press('Tab');
    await page.waitForTimeout(200);

    // Clear existing description
    for (let i = 0; i < 50; i++) {
      await page.keyboard.press('Backspace');
      await page.waitForTimeout(30);
    }

    await page.keyboard.type('UPDATED: CRUD test mapping modified', { delay: 50 });
    await page.waitForTimeout(500);
    await page.screenshot({ path: 'crud-7-form-updated.png', fullPage: true });

    // Save changes
    for (let i = 0; i < 10; i++) {
      await page.keyboard.press('Tab');
      await page.waitForTimeout(200);
    }
    await page.keyboard.press('Enter');
    await page.waitForTimeout(3000);
    await page.screenshot({ path: 'crud-8-after-update.png', fullPage: true });
    console.log('   ✅ Updated mapping');

    // === DELETE ===
    console.log('\n7️⃣  DELETE: Remove the mapping...');
    // Search for our test mapping again
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.type(testMappingName, { delay: 50 });
    await page.waitForTimeout(2000);

    // Tab to first result and press Delete key
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.press('Delete');
    await page.waitForTimeout(2000);
    await page.screenshot({ path: 'crud-9-delete-confirmation.png', fullPage: true });

    // Confirm deletion (Tab to confirm button)
    await page.keyboard.press('Tab');
    await page.waitForTimeout(300);
    await page.keyboard.press('Enter');
    await page.waitForTimeout(3000);
    await page.screenshot({ path: 'crud-10-after-delete.png', fullPage: true });
    console.log('   ✅ Deleted mapping');

    // === VERIFY DELETE ===
    console.log('\n8️⃣  VERIFY: Confirm deletion...');
    await page.waitForTimeout(2000);
    await page.screenshot({ path: 'crud-11-final-state.png', fullPage: true });
    console.log('   ✅ Mapping removed from list');

  } catch (error) {
    console.error('\n💥 TEST ERROR:', error.message);
    errors.push(error.message);
    await page.screenshot({ path: 'crud-error.png', fullPage: true });
  }

  console.log('\n' + '='.repeat(70));
  console.log('CRUD WORKFLOW TEST RESULTS');
  console.log('='.repeat(70));

  if (typeErrors.length > 0) {
    console.log(`\n❌ FAILED: ${typeErrors.length} type errors detected`);
    typeErrors.forEach((err, i) => console.log(`   ${i + 1}. ${err}`));
  } else if (errors.length > 0) {
    console.log(`\n⚠️  WARNING: ${errors.length} errors detected (but no type errors)`);
    errors.forEach((err, i) => console.log(`   ${i + 1}. ${err}`));
  } else {
    console.log('\n✅ SUCCESS: Complete CRUD workflow executed without errors');
    console.log('   - Created new mapping');
    console.log('   - Read/downloaded mappings');
    console.log('   - Updated mapping');
    console.log('   - Deleted mapping');
    console.log('   - No type errors detected');
  }

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

  const exitCode = typeErrors.length > 0 ? 1 : 0;
  console.log(`\nExit code: ${exitCode}`);
  console.log('='.repeat(70));

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